Highcharts: лучшая практика для создания диаграммы Венна

Я хотел бы создать другую диаграмму Венна, подобную этой http://www.biomedcentral.com/1471-2105/12/35/figure/F1 и используйте библиотеку Highchart (потому что есть хороший вариант экспорта). Я нашел этот пример, но я не могу сделать эллипсы, когда у меня есть 4 набора данных. Я думаю, что на уровне "Maker" это возможно сделать. Но может есть и другое решение. Пожалуйста, не могли бы вы дать мне несколько зацепок?

var chart = new Highcharts.Chart({
    chart: {
        renderTo:'container',
        type:'scatter'
    },
    title:{
        text:'Chart Title'
    },
    credits:{enabled:false},
    legend:{},
    plotOptions: {
        series: {
            shadow:false,
            borderWidth:0,
            marker:{
                symbol:'circle'
            }                            
        }
    },
    xAxis:{
        min:0,
        max:10,
        lineWidth:0,
        gridLineWidth:0,
        title:{text:''},
        labels:{enabled:false}
    },
    yAxis:{
        min:0,
        max:100,
        lineWidth:0,
        gridLineWidth:0,
        title:{text:''},
        labels:{enabled:false}
    },    
    series: [{
        color:'rgba(90,155,212,.5)',
        name:'this thing',
        data: [{
            x:3,
            y:50,
            marker:{
                radius:150,
                fillColor:'rgba(90,155,212,.5)',
                lineColor:'rgba(90,155,212,.75)',
                lineWidth:1,
                states:{
                    hover:{
                        radius:150
                    }
                }
            }
        }]
    },{
       color:'rgba(241,90,96,.5)',
       name:'that thing',
       data: [{
           x:6,
           y:60,
           marker:{
               radius:125,
               fillColor:'rgba(241,90,96,.5)',
               lineColor:'rgba(241,90,96,.75)',
               lineWidth:1,
               states:{
                   hover:{
                       radius:125
                   }
               }
           }
       }]
    },{
       color:'rgba(250,250,91,.5)',
       name:'the other thing',
       data: [{
           x:5,
           y:25,
           marker:{
               radius:50,
               fillColor:'rgba(250,250,91,.5)',
               lineColor:'rgba(250,250,91,.75)',
               lineWidth:1,
               states:{
                   hover:{
                       radius:50
                   }
               }
           }
       }]
    }]
});

person Tof    schedule 24.05.2013    source источник
comment
В этой первой ссылке есть четыре диаграммы Венна, какую из них вы хотели бы сделать? Вы упоминаете эллипсы, но в примере jsfiddle есть только круги (которые технически являются эллипсами, но тогда я бы подумал, что вы явно скажете круги). Вы просто хотите иметь возможность добавить четвертый круг в пример jsfiddle? Если это так, просто добавьте к существующему примеру следующее: jsfiddle.net/AyqzZ/24. Под Maker ты имеешь в виду маркер? Кроме того, если вы поднимете вопрос на их странице Github, они очень быстро и услужливо ответят.   -  person Amit Kumar Gupta    schedule 24.05.2013
comment
Я хотел бы иметь возможность построить диаграмму Венна из четырех наборов с эллипсами. Я не могу изменить круг на эллипсы.   -  person Tof    schedule 24.05.2013
comment
С тех пор вы что-нибудь пробовали?   -  person icedwater    schedule 01.07.2015
comment
Я эмулировал диаграмму Венна как: stackoverflow.com/a/50642260/2683452 PS: кредит принадлежит: stackoverflow.com/a/20193431/2683452   -  person A_01    schedule 01.06.2018


Ответы (1)


Нет ничего встроенного для рисования типов маркеров эллипса.

Чтобы добиться такого типа диаграммы в Highcharts, вам придется рисовать эллипсы самостоятельно.

Взгляните на эту демонстрацию:

http://highcharts.com/demo/renderer

и в документах для функции Renderer:

http://api.highcharts.com/highcharts#Renderer

person jlbriggs    schedule 24.05.2013