如何用 highcharts 库绘制欧拉图？

【问题标题】：How to draw Euler diagram with highcharts library?如何用 highcharts 库绘制欧拉图？
【发布时间】：2020-09-15 09:49:35
【问题描述】：

我想绘制如下图所示的图表。如何使用 Highcharts 库做到这一点？

我可以在高图中得到同心圆，但不是这样。请帮忙。

如果可以完成这项工作，或者建议我一个图书馆。提前谢谢你。

【问题讨论】：

标签： charts highcharts venn-diagram

【解决方案1】：

您可以使用venn系列类型并在加载事件中手动定位圆形元素，例如：

    chart: {
        events: {
            load: function() {
                var points = this.series[0].points,
                    point1R = points[0].shapeArgs.r;

                points[1].graphic.attr({
                    x: points[1].graphic.getBBox().x - (point1R - points[1].shapeArgs.r)
                });

                points[2].graphic.attr({
                    x: points[2].graphic.getBBox().x - (point1R - points[2].shapeArgs.r)
                });
            }
        }
    }

现场演示：https://jsfiddle.net/BlackLabel/padhgfe9/1/

API 参考： https://api.highcharts.com/highcharts/series.venn

【讨论】：