我发誓我以前看过这是做过的,但似乎找不到答案。
当我旋转HighCharts时,是否有一种方法可以使内联语句确定标记符号。
例如:
Highcharts.stockChart(chartElementId, {
title: {
text: 'Foo chart'
},
series: [{
name: 'Foo',
data: ...,
marker: {
enabled: true,
symbol: this.x > 1 ? 'circle' : 'square'
}
}]
});
我已经看到了在后处理中所做的类似的事情(在渲染图表之后),但是我想知道是否有一种方法可以在渲染中进行。
您可以挂接到负责绘图点的函数 - 在调用之前,根据选项中定义的符号回调更新点。
包装drawPoints
方法:
const H = Highcharts;
H.wrap(H.Series.prototype, 'drawPoints', function(p) {
const options = this.options;
const symbolCallback = options.marker && options.marker.symbolCallback;
const points = this.points;
if (symbolCallback && points.length) {
points.forEach(point => {
const symbol = symbolCallback.call(point);
if (symbol) {
point.update({
marker: {
symbol: symbol
}
}, false)
}
})
}
p.call(this);
})
系列配置:
series: [{
marker: {
symbolCallback: function() {
return this.x > 2 ? this.y > 150 ? 'circle' : 'triangle' : 'square';
}
},
实时示例
http://jsfiddle.net/09mqttxn/
var H = Highcharts;
H.wrap(H.Series.prototype, 'drawPoints', function(p) {
const options = this.options;
const symbolCallback = options.marker && options.marker.symbolCallback;
const points = this.points;
if (symbolCallback && points.length) {
points.forEach(point => {
const symbol = symbolCallback.call(point);
if (symbol) {
point.update({
marker: {
symbol: symbol
}
}, false)
}
})
}
p.call(this);
})
H.chart('container', {
series: [{
marker: {
symbolCallback: function() {
return this.x > 2 ? this.y > 150 ? 'circle' : 'triangle' : 'square';
}
},
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id="container" style="height: 400px"></div>
在那种情况下,应该具有'x'。这个想法是在串联对象中使用自我参考:
{ x:2,
name: 'Tokyo',
marker: {
enabled: true
},
init : function(){
this.marker.symbol = this.x > 1 ? 'circle' : 'square';
return this;
},
data: ....
}.init()
jsfiddle