HighStock HighCharts 在点击事件上设置标志

Question

我正在使用 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 错误，但不会创建标志。至少，它没有显示出来。我想基本上让它在他们点击的烛台上绘制旗帜。如果他们单击另一个点，我想删除旧标志并在新点上绘制一个新标志。我认为这最好通过在系列中添加和删除数据来完成，但运气不佳。

对此的任何帮助将不胜感激！

Answer 1

首先，一个 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 需要一个数组，并且您传递一个值，格式也是对于标志类型系列，该点需要稍微重做

 click: function(event) {
                this.chart.series[5].setData([{
                    x: event.point.x,
                    title: 'hey you clicked me'
                }]);

小提琴更新@http://jsfiddle.net/U2Z2x/2/