我正在使用Highcharts.js制作组合图表。
它由一条线和两个系列的气泡组成 - 一个表示正面变化,另一个表示负面。
我的代码如下:
$('#container').highcharts({
exporting: {
enabled: false
},
title: false,
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
},
yAxis: {
title: false,
labels: {
enabled: false,
},
gridLineWidth: 0
},
tooltip: {
enabled: false
},
plotOptions: {
series: {
cursor: 'pointer'
},
bubble: {
minSize: 50,
maxSize: 80
}
},
series: [{
name: 'Line',
data: [{"y":7,"color":"#0BBF23"},{"y":6.9,"color":"#BF0B23"},{"y":9.5,"color":"#0BBF23"},{"y":14.5,"color":"#0BBF23"},{"y":18.2,"color":"#0BBF23"},{"y":21.5,"color":"#0BBF23"},{"y":25.2,"color":"#0BBF23"},{"y":26.5,"color":"#0BBF23"},{"y":23.3,"color":"#BF0B23"},{"y":18.3,"color":"#BF0B23"},{"y":13.9,"color":"#BF0B23"},{"y":9.6,"color":"#BF0B23"}],
showInLegend: false,
marker: {radius: 18},
states: {
hover: {
enabled: false,
}
}
}, {
name: 'Positive',
dataLabels: {
enabled: true,
x:0,
formatter:function() {
return this.point.z;
},
style:{color:"black",fontSize:"16px",textShadow:"0px"}
},
type: 'bubble',
color: '#0BBF23',
data: [{"x":2,"y":9.5,"z":2.6},{"x":3,"y":14.5,"z":5},{"x":4,"y":18.2,"z":3.7},{"x":5,"y":21.5,"z":3.3},{"x":6,"y":25.2,"z":3.7},{"x":7,"y":26.5,"z":1.3}],
}, {
name: 'Negative',
type: 'bubble',
color: '#BF0B23',
data: [[1,6.9,0.1],[8,23.3,3.2],[9,18.3,5],[10,13.9,4.4],[11,9.6,4.3]],
dataLabels: {
enabled: true,
x:0,
formatter:function() {
return this.point.z;
},
style:{color:"black",fontSize:"16px",textShadow:"0px"}
},
states: {
hover: {
halo: {
size: 1,
attributes: {
zIndex: 9000
},
opacity: 1
}
}
},
}, {
type: 'column',
pointWidth: 1,
borderWidth: 0,
showInLegend: false,
data: [{"y":7,"color":"#0BBF23"},{"y":6.9,"color":"#BF0B23"},{"y":9.5,"color":"#0BBF23"},{"y":14.5,"color":"#0BBF23"},{"y":18.2,"color":"#0BBF23"},{"y":21.5,"color":"#0BBF23"},{"y":25.2,"color":"#0BBF23"},{"y":26.5,"color":"#0BBF23"},{"y":23.3,"color":"#BF0B23"},{"y":18.3,"color":"#BF0B23"},{"y":13.9,"color":"#BF0B23"},{"y":9.6,"color":"#BF0B23"}] }]
});
正如您所看到的,我正在使用" halo"当它在徘徊时,试图填补负面系列的泡沫。理想情况下,我也希望增加气泡大小和字体,但我不知道如何实现它。
有没有人知道如何在悬停时使用纯色填充标记,增加半径并增加字体大小?
在这里小提琴:http://jsfiddle.net/18qa8rds/1/
值得注意的是,在我的本地版本中,线条图通过光环显示,但它并不在小提琴上。