Highcharts：生成维恩图的最佳实践 [英] Highcharts : Best practise for generate venn diagram

问题描述

我将创建不同的维恩图，如 http：// www .biomedcentral.com / 1471-2105 / 12/35 / figure / F1 ，并使用Highchart库（因为有一个很好的导出选项）。我发现这个例子，但是当我有4个数据集时，我不能使椭圆。我认为它是在制造商级别的参数，它可以做到这一点。但也有另一种解决方案。请你给我几个线索？

  var chart = new Highcharts.Chart（{
 chart：{
 renderTo：'container' 
 type：'scatter'
}，
 title：{
 text：'Chart title'
}，
 credits：{enabled：false} 
 legend：{}，
 plotOptions：{
系列：{
 shadow：false，
 borderWidth：0，
标记：{
符号：'circle'
} 
} 
}，
 xAxis：{
 min：0，
 max：10，
 lineWidth： 0，
 gridLineWidth：0，
标题：{text：''}，
标签：{enabled：false} 
}，
 yAxis：{
 min：0，
 max：100，
 lineWidth：0，
 gridLineWidth：0，
 title：{text：''}，
 labels：{enabled ：false} 
}，
系列：[{
 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，
状态：{
 hover：{
半径：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， 
状态：{
 hover：{
 radius：125 
} 
 
} 
}] 
}，{
 color：'rgba（250,250,91，.5）'，
名称：'另一件事'，
数据：[{
x：5，
y：25，
标记：{
 radius：50，
 fillColor：'rgba（250,250,91， 5）'，
 lineColor：'rgba（250,250,91，.75）'，
 lineWidth：1，
状态：{
 hover：{
 radius： 50 
} 
} 
} 
}] 
}] 
}）; 
  

解决方案

没有任何内容可以绘制椭圆标记类型。

为了在Highcharts中实现这种类型的图表，您必须自己绘制椭圆。

看看这个演示：

http://highcharts.com/demo/renderer

以及Renderer功能的文档： / p>

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

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

解决方案

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

这篇关于Highcharts：生成维恩图的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！