一、阻止图例的点击动作
highcharts默认点击图表下方的图例,可以转换相应的显示状态,这个真的很炫,不过有些时候这并不是我们需要的,怎么办?
plotOptions: {
series: {
<span style="color:#ff0000;">events: {
legendItemClick: function (event) {
return false;
}</span>
}
}
}
没错,就是标红的那个。
二、修改drilldown中y轴title
drilldown-功能和实现看官方api吧。我们的应用是这样的:第一级图表y轴显示的平均分,范围是0-5分,第二级图表y轴显示的是评分人数,范围0-n不限,这时进入第二级的时候原本y轴的title说明就不合适了,改吧!
yAxis: {
title: {
<span style="color:#ff0000;">text: yTitle,</span>
style: {
font: '0.1rem 微软雅黑'
},
rotation: 0
}
}
就这个,在外面定义一个yTitle
plotOptions: {
column: {
cursor: 'pointer',
point: {
events: {
click: function () {
var drilldown = this.drilldown;
if (drilldown) {
<span style="color:#ff0000;">yTitle = "第一级的title";</span>
setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color); //示例中的代码,重绘图形
} else {
<span style="color:#ff0000;">yTitle = "第二级的title";</span>
setChart(name, categories, data); //同上
}
}
}
}<pre name="code" class="javascript"> }
}
还没完,这样改完你会发现title根本就不会变,记得上面的setChart吗?没错,这里也要改改
function setChart(name, categories, data, color) {
chart.xAxis[0].setCategories(categories, false);
<span style="color:#ff0000;">chart.yAxis[0].setTitle({
text: yTitle,
style: {
font: '0.1rem 微软雅黑'
}
}, false);</span>
chart.series[0].remove(false);
chart.addSeries({
name: name,
data: data,
color: color || 'white'
}, false);
chart.redraw();
}
这里的红色代码是示例中没有的,添加,测试,恭喜~