如何通過整合<code>highcharts-ng</code></p> <p>的DI highchart範圍滑塊整合angularjs

Question

我使用angularjs highchart我已經通過下列選項

var chart = { 
      options: { 
       chart: { 
        type: 'bar' 
       } 
      }, 
      title: { 
       text: chartData.name 
      }, 
      subtitle: { 
       text: chartData.subname 
      }, 
      rangeSelector: { 
       enabled:true, 
       selected: 1 
      }, 

      xAxis: { 
       title: { 
        text: chartData.x.title 
       } 
      }, 
      yAxis: { 
       title: { 
        text: chartData.y.title 
       } 
      }, 
      series: [{ 
       name: chartData.data[0].name, 
       data: chartData.data[0].data, 
       dashStyle: 'longdash' 
      }, { 
       name: chartData.data[1].name, 
       data: chartData.data[1].data, 
       dashStyle: 'dot' 
      }, { 
       name: chartData.data[2].name, 
       data: chartData.data[2].data 
      }] 
     } 

我已經加入rangeslider的選擇，但它的創建不同類型的圖表沒有反映在圖表中。

如何highchart範圍滑塊angualrjs

Answer 1

整合包括對highstock而不是highcharts參考。兩者兼容highcharts-ng，但只有highstock支持rangeSelector。然後，將rangeSelector移動到options對象中。注意 - 「範圍滑塊」功能在highstock文檔中稱爲navigator，並且還必須添加到options。

var chart = { 
    options: { 
    chart: { 
     type: 'bar' 
    }, 
    rangeSelector: { 
     enabled: true 
    }, 
    navigator: { 
     enabled: true 
    } 
    } 
    ... 
}; 

這裏是一個演示，從highcharts-NG的GitHub的頁面： http://jsfiddle.net/pablojim/r88yszk0/