如何在 Highcharts 维恩图中显示多个集合？答案

【问题标题】：How to show multiple sets in a Highcharts Venn chart?如何在 Highcharts 维恩图中显示多个集合？
【发布时间】：2019-06-18 01:26:08
【问题描述】：

我想在一个图表中显示两组维恩图。所以我对集合 A 和 B 有以下代码：

Highcharts.chart('container', {
  series: [{
    type: 'venn',
    data: [{
        sets: ['A1'],
        value: 188956
    }, {
        sets: ['A2'],
        value: 211267
    }, {
        sets: ['A1', 'A2'],
        value: 23085,
        name: "overlap"
    }, {
        sets: ['B1'],
        value: 10880
    }, {
        sets: ['B2'],
        value: 10880
    }, {
        sets: ['B1', 'B2'],
        value: 6389,
        name: "overlap"
    }]
  }],
  title: {
    text: 'Sets A and B'
  }
});

将所有内容显示在一起的真正好处在于，四个圆圈的大小彼此成比例。问题是它们是如何布置的。我想在 A 的右侧显示集合 B，它们之间有一些间距。我还希望设置 B 像 A 一样水平布置。

这是否可行，如果可行，如何实现？

谢谢！阿尔瓦罗

【问题讨论】：

标签： highcharts venn-diagram

【解决方案1】：

这在一个图表中是不可能的，但您可以创建多个图表：

Highcharts.chart('container', {
    ...,
    series: [{
        type: 'venn',
        data: [...]
    }]
});

Highcharts.chart('container2', {
    ...,
    series: [{
        type: 'venn',
        data: [...]
    }]
});

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

文档： https://www.highcharts.com/docs/chart-and-series-types/venn-series

【讨论】：

我意识到这一点，但我试图保持圆圈的大小成比例。例如，如果在集合 A 中有一个值为 1000 的圆，而在 B 中有一个值为 250 的圆，我希望 B 中的圆是 A 中圆的大小的四分之一。有没有办法通过单独的图表？谢谢。
嗨@Alvaro Mendez，是的，您可以将spacing 设置为零并通过图表的大小来控制圆圈的大小。现场演示：jsfiddle.net/BlackLabel/Lbgzmtuj
感谢您的回复@ppotaczek。这是我的现场演示版本：jsfiddle.net/bq9upL8n 请注意，在每个容器中，我都有一个值为 500 的“坏”圆圈。所以我希望它们在屏幕上的相对大小相同，但事实并非如此。有没有让他们平等的选择？
@Alvaro Mendez - 不幸的是，图表不相关。您必须计算并设置chart.width，例如：jsfiddle.net/BlackLabel/e5rwk8vz