我有一个只有一个系列的areapline。该设计要求绘制触摸该系列的x轴网格线,并且不要超出该系列。是否有可能做到这一点?这是我配置网格线的代码:
xAxis: {
gridLineWidth: 1,
tickAmount: 30,
lineWidth: 0,
labels: {
enabled: false
},
minPadding: 0
},
答案 0 :(得分:0)
另一个选项(jlbriggs在对问题的评论中提到的另外两个选项)可能是extend Highcharts并在包装器中更改网格线的路径,如:
(function(H) {
var UNDEFINED;
H.wrap(H.Tick.prototype, 'render', function(p) {
p.apply(this, [].slice.call(arguments, 1)); //run original function
if (this.axis.isXAxis && this.gridLine) {
var point = this.axis.series[0].options.data[this.pos],
d = this.gridLine.attr('d').split(' ');
if (point !== UNDEFINED) {
d[2] = this.axis.chart.yAxis[0].toPixels(point);
d = d.join(' ');
} else {
d = ''; //remove if not crossing any point
}
this.gridLine.attr({
d: d
});
}
});
})(Highcharts)
示例:http://jsfiddle.net/69f5z3us/
如果网格线未穿过任何点,则网格线将被删除,但如果您愿意,可以更改该部分代码。