避免在高图气泡图中重叠

Question

我试图将几个系列表示为气泡图，但我不知道如何将气泡表示在属于同一类别的不同X位置。我们来看下面的例子

当图表以条形或列形式表示时，没有重叠，但是当我选择气泡时，每个气泡都被绘制在相同的位置。

我想要这样的事情：

我怎样才能做到这一点？在这里你可以找到例子：

chart: {
    type: 'bubble',
    plotBorderWidth: 1
},
xAxis: {
    labels: {
    overflow: 'justify'
    },
    lineColor: "#1E232A",
    tickColor: "#1E232A",
    type: "category"
    },
series: [{
        name: "BLUE",
    data: [
        { y: 65, z: 13.8, name: 'Belgium' },
        { y: 32.9, z: 14.7, name: 'Germany' },
        { y: 11.5, z: 15.8, name: 'Finland' }
    ]
},
{
    name: "BLACK",
    data: [
        { y: 65, z: 44.8, name: 'Belgium' },
        { y: 32.9, z: 66.7, name: 'Germany' },
        { y: 11.5, z: 77.8, name: 'Finland' }
    ]
},
{
    name: "GREEN",
    data: [
        { y: 65, z: 54.8, name: 'Belgium' },
        { y: 32.9, z: 56.7, name: 'Germany' },
        { y: 11.5, z: 37.8, name: 'Finland' }
    ]
}]

https://jsfiddle.net/433bqnea/

Answer 1

据我所知/发现没有直接支持的方法来做到这一点。我认为你最接近的是为每个点指定x值，或为pointPlacement的每个系列指定值。我使用pointPlacement：

做了一个例子

series: [{
  name: "BLUE",
  pointPlacement: -0.25, //added this
  data: [
    { y: 65, z: 13.8, name: 'Belgium' },
    { y: 32.9, z: 14.7, name: 'Germany' },
    { y: 11.5, z: 15.8, name: 'Finland' }
  ]
},
{
  name: "BLACK",
  data: [
    { y: 65, z: 44.8, name: 'Belgium' },
    { y: 32.9, z: 66.7, name: 'Germany' },
    { y: 11.5, z: 77.8, name: 'Finland' }
  ]
},
{
  name: "GREEN",
  pointPlacement: 0.25, //added this
  data: [
    { y: 65, z: 54.8, name: 'Belgium' },
    { y: 32.9, z: 56.7, name: 'Germany' },
    { y: 11.5, z: 37.8, name: 'Finland' }
  ]
}]

以上将如下所示：

工作示例： https://jsfiddle.net/433bqnea/3/

关于pointPlacement的API ：https://api.highcharts.com/highcharts/series.bubble.pointPlacement