Highcharts - Передача данных для флагов в массиве. Он не отображается

Question

Я пытаюсь отобразить 3 флага (экспериментируя с флагами) на диаграмме подсвечника в Highchart, но флаг {x: Date.UTC (2012, 7, 6), заголовок: 'On series'} Не получается. Зачем?

$(function() { 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) { 

     // split the data set into ohlc and volume 
     var ohlc = [], 
      volume = [], 
      dataLength = data.length, 
      arrflag =[ 
      {x: Date.UTC(2012, 7, 17),title: 'On series'}, 
      {x: Date.UTC(2012, 7, 9),title: 'On series'} 
      ]; 

     arrflag.push([ 
      {x: Date.UTC(2012, 7, 6),title: 'On series'} 
     ]); 

     for (i = 0; i < dataLength; i++) { 
      ohlc.push([ 
       data[i][0], // the date 
       data[i][1], // open 
       data[i][2], // high 
       data[i][3], // low 
       data[i][4] // close 
      ]); 

      volume.push([ 
       data[i][0], // the date 
       data[i][5] // the volume 
      ]) 
     } 

     // set the allowed units for data grouping 
     var groupingUnits = [[ 
      'week',       // unit name 
      [1]        // allowed multiples 
     ], [ 
      'month', 
      [1, 2, 3, 4, 6] 
     ]]; 

     // create the chart 
     chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'container', 
       alignTicks: false 
      }, 

      rangeSelector: { 
       selected: 0 
      }, 

      title: { 
       text: 'AAPL Historical' 
      }, 

      yAxis: [{ 
       title: { 
        text: 'OHLC' 
       }, 
       height: 200, 
       lineWidth: 2 
      }, { 
       title: { 
        text: 'Volume' 
       }, 
       top: 300, 
       height: 100, 
       offset: 0, 
       lineWidth: 2 
      }], 

      series: [{ 
       type: 'candlestick', 
       name: 'AAPL', 
       id: 'AAPLX', 
       data: ohlc, 
       dataGrouping: { 
        units: groupingUnits 
       } 
      }, { 
       type: 'column', 
       name: 'Volume', 
       data: volume, 
       yAxis: 1, 
       dataGrouping: { 
        units: groupingUnits 
       } 
      },{ 
       type: 'flags', 
       name: 'Flags on series', 
       data: arrflag, 
       onSeries: 'AAPLX', 
       shape: 'squarepin' 
      }] 
     }); 
    }); 
});​ 

Live DEMO

Answer 1

You array флагов имеет следующее значение:

arrflag =[ 
    {x: Date.UTC(2012, 7, 17),title: 'On series'}, 
    {x: Date.UTC(2012, 7, 9),title: 'On series'} 
]; 

При нажатии другой flag вы добавляете его в другой массив, который не ожидается. Таким образом, результат будет.

arrflag =[ 
    {x: Date.UTC(2012, 7, 17),title: 'On series'}, 
    {x: Date.UTC(2012, 7, 9),title: 'On series'}, 
    [{x: Date.UTC(2012, 7, 6),title: 'On series'}] 
]; 

Удалить [ и ] из следующего кода.

arrflag.push([ 
    {x: Date.UTC(2012, 7, 6),title: 'On series'} 
]);