避免在 highchart 气泡图中重叠

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

据我所知 see/find 没有直接支持的方法来执行此操作。我认为最接近的是为每个点指定 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/

API 在 pointPlacement 上：https://api.highcharts.com/highcharts/series.bubble.pointPlacement

避免在 highchart 气泡图中重叠

Avoid overlapping in highchart bubble chart

bubble-chart

highcharts