避免在高图气泡图中重叠

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