为填充气泡高图表中的每个气泡添加标题



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

"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'
}],
}]
});

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

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

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

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

现场演示:http://jsfiddle.net/BlackLabel/6m4e8x0y/4771/

接口参考:

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

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

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

最新更新