为 Packed Bubble Highcharts 中的每个气泡添加标题

Question

我有一个打包的气泡图，效果很好。我想为每个较大的、分开的气泡添加一个标题。标题应该始终显示，我希望它是系列的名称。我正在使用拆分系列。

'name' 属性显示在工具提示中，但我希望它始终显示。

这是创建气泡的代码：

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: 'Test',
    data: [{
      name: "Lorem",
      value: 29.4,
      color: 'red'
    },
    {
      name: "Ipsum",
      value: 34.1,
      color: 'blue'
    },
    {
      name: "Dolor",
      value: 7.1,
      color: 'green'
    }],
  }, {
    name: 'Test 2',
    data: [{
      name: 'Lorem',
      value: 300.1,
      color: 'red'
    }, 
    {
      name: 'Ipsum',
      value: 20.7,
      color: 'blue'
    },
    {
      name: "Dolor",
      value: 97.2,
      color: 'green'
    }],
  }, {
    name: 'Test 3',
    data: [{
      name: "Lorem",
      value: 8.2,
      color: 'red'
    },
    {
      name: "Ipsum",
      value: 9.2,
      color: 'blue'
    },
    {
      name: "Dolor",
      value: 13.1,
      color: 'green'
    }],
  }]
});

这可能吗？另外，如果可能的话，我怎样才能从工具提示中删除名称？

Answer 1

您可以使用 annotations 或 Highcharts.SVGRenderer class 添加标签。

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

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

为 Packed Bubble Highcharts 中的每个气泡添加标题

Add Title To Each Bubble in Packed Bubble Highcharts

javascript

highcharts

ruby-on-rails-5