我正在使用 HighCharts 的 HighStock 版本在图表中创建一系列数据。我有一个烛台图,在条形图之上,在直方图之上。烛台点是可点击的。我想在他们刚刚点击的烛台图表上的点上添加一个标志。
这是我试过的一些代码:
// create the chart
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
alignTicks: false
},
rangeSelector: {
selected: 1
},
title: {
text: 'DJIA Historical'
},
yAxis: [{
title: {
text: 'OHLC'
},
height: 300,
lineWidth: 2
}, {
title: {
text: 'Volume'
},
top: 400,
height: 100,
offset: 0,
lineWidth: 2
}, {
title: {
text: 'MACD'
},
top: 520,
height: 100,
offset: 0,
lineWidth: 1
}],
series: [{
type: 'candlestick',
name: 'DJIA',
data: ohlc,
events: {
click: function(event) {
console.log(chart);
chart.series[6].setData(event.point);
}
},
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Histogram',
pointPadding: 0,
groupPadding: 0,
data: histogram,
yAxis: 2,
color: '#666666'
}, {
type: 'line',
name: 'MACD',
pointPadding: 0,
groupPadding: 0,
data: macd,
yAxis: 2,
color: '#0000FF'
}, {
type: 'line',
name: 'Signal',
pointPadding: 0,
groupPadding: 0,
data: signal,
yAxis: 2,
color: '#000000'
}, {
type: 'flags',
name: 'Active Point',
data: [],
onSeries: ohlc,
shape: 'squarepin'
}]
});
})
图表不会引发任何 JavaScript 错误,但不会创建标志。至少,它没有表现出来。我基本上想让它在他们点击的烛台上画旗。如果他们单击另一个点,我想删除旧标志并在新点上绘制一个新标志。我认为最好通过在系列中添加和删除数据来完成此操作,但运气不佳。
如有任何帮助,我们将不胜感激!
最佳答案
首先,非常感谢一个 js-fiddle 示例来理解您的问题。 根据我对你的问题的最佳理解,试试这个(假设 5 是你的标志系列的索引,你的代码似乎使用索引 6?!)
click: function(event) {
this.chart.series[5].addPoint({
x: event.point.x,
title: 'hey you clicked me'
});
}
我的代码@ http://jsfiddle.net/U2Z2x/1/
由于您似乎只对显示 1 个标志感兴趣,因为您正确地使用了 setData,这似乎是您最好的选择,只是一个问题,setData 需要一个数组,并且您传递一个值,也是flag type系列需要稍微重做一点
click: function(event) {
this.chart.series[5].setData([{
x: event.point.x,
title: 'hey you clicked me'
}]);
fiddle 更新@ http://jsfiddle.net/U2Z2x/2/
关于javascript - HighStock HighCharts 在点击事件上设置标志,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11783549/