避免 highcharts 气泡图中的重叠

ia2d9nvy 于 2022-11-10 发布在 Highcharts

关注(0)|答案(2)|浏览(430)

我试图用气泡图来表示几个序列，但是当它们属于同一类别时，我不知道如何表示不同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/

highcharts

来源：https://stackoverflow.com/questions/47175982/avoid-overlapping-in-highchart-bubble-chart

2条答案

按热度按时间

zqdjd7g91#

据我所知，目前还没有直接支持的方法。我认为最接近的方法是为每个点指定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' }
  ]
}]

上面的内容如下所示：