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，这似乎是您最好的选择，只是一个catch，setData需要一个数组，并且您传递一个值，也是点的格式需要稍微重做旗型系列

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

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