Highcharts : Best practise for generate venn diagr

2019-06-06 22:23发布

问题:

I would to create different venn diagram like that http://www.biomedcentral.com/1471-2105/12/35/figure/F1 and use Highchart library (because there is a good exporting option). I found this example but i can't make the ellipses when i have 4 datasets. I think it's at "Maker" level parameters that it's possible to do it. But there is maybe another solution. Please can you give me few leads?

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
                   }
               }
           }
       }]
    }]
});

回答1:

There is nothing built in to draw elipse marker types.

In order to achieve that type of diagram in Highcharts, you'll have to draw the ellipses yourself.

Take a look at this demo:

http://highcharts.com/demo/renderer

and at the docs for the Renderer function:

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