在包装好的气泡高图中为每个气泡添加标题

问题描述 投票:0回答:1

我有一个包装好的气泡图,效果很好。我想为每个较大的分离的气泡添加一个标题。标题应始终显示,我希望它成为系列的名称。我正在使用拆分系列。这是当前图表的外观:

enter image description here

您可以看到,'name'属性显示在工具提示中,但我希望它始终显示。像这样的样机:

enter image description here

这里是创建气泡的代码:

Highcharts.chart('bubble-split-chart', {
  chart: {
    type: 'packedbubble',
    animation: false,
    backgroundColor: {
      linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
      stops: [
          [0, '#15191b'],
          [1, '#15191b']
      ]
    },
  },
  // remove hamburger button
  exporting: {
    enabled: false
  },
  // remove chart watermark (highcharts.com)
  credits: {
    enabled: false
  },
  title: {
  text: '',
  enabled: false
  },
  tooltip: {
      useHTML: true,
      pointFormat: '<b>{point.name}</b>'
  },
  plotOptions: {
    packedbubble: {
      minSize: '1%',
      maxSize: '100%',
      zMin: 1,
      zMax: 400,
      layoutAlgorithm: {
        enableSimulation: false,
        gravitationalConstant: 0.05,
        splitSeries: true,
        seriesInteraction: false,
        dragBetweenSeries: false,
        parentNodeLimit: true
      }
    },
    legend: {
      enabled: false
    }
  },
  series: [{
    name: 'Dell',
    data: [{
      name: "Australia",
      value: 29.4
    },
    {
      name: "New Zealand",
      value: 34.1
    },
    {
      name: "Papua New Guinea",
      value: 7.1
    }],
  }, {
    name: 'Apple1',
    data: [{
      name: 'Germany',
      value: 300.1,
      color: 'teal'
    }, {
      name: 'Croatia',
      value: 20.7,
      color: 'yellow'
    }, {
      name: "Belgium",
      value: 97.2,
      color: 'coral'
    }]
  }]
});

这可能吗?另外,如果可以的话,如何从工具提示中删除名称?

javascript highcharts ruby-on-rails-5
1个回答
0
投票

您可以使用annotationsHighcharts.SVGRenderer类添加标签。

要从工具提示集中删除系列名称:

tooltip: {
    headerFormat: '',
    ...
}

实时演示: http://jsfiddle.net/BlackLabel/6m4e8x0y/4771/

API参考:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

https://api.highcharts.com/highcharts/annotations

https://api.highcharts.com/highcharts/tooltip.headerFormat

© www.soinside.com 2019 - 2024. All rights reserved.