Селектор диапазона в диаграмме высокой диаграммы

Question

Я использую Highchart, чтобы нарисовать диаграммы моих данных. Я видел селектор date range в этой диаграмме, но я использую Area Graph, но диапазон выбора не входит в это. Далее мой код ,

jQuery('#weenat_statr_chart').highcharts({ 

       title: { 
        text: chart_title 
       }, 

       xAxis: { 
        type: 'datetime' 
       }, 

       yAxis: { 
        title: { 
         text: null 
        } 
       }, 

       tooltip: { 
        crosshairs: true, 
        shared: true, 
        valueSuffix: unit_value 
       }, 

       legend: { 
       }, 
, 
       rangeSelector: { 
        buttonTheme: { // styles for the buttons 
         fill: 'none', 
         stroke: 'none', 
         'stroke-width': 0, 
         r: 8, 
         style: { 
          color: '#039', 
          fontWeight: 'bold' 
         }, 
         states: { 
          hover: { 
          }, 
          select: { 
           fill: '#039', 
           style: { 
            color: 'white' 
           } 
          } 
         } 
        }, 
        labelStyle: { 
         color: 'silver', 
         fontWeight: 'bold' 
        }, 
        selected: 1 
       },    
       series: [{ 
        name: unit_name, 
        data: averages, 
        zIndex: 1, 
        marker: { 
         fillColor: 'white', 
         lineWidth: 2, 
         lineColor: Highcharts.getOptions().colors[0] 
        } 
       }, { 
        name: '<?php echo __("Range","test-plugin"); ?>', 
        data: ranges, 
        type: 'arearange', 
        lineWidth: 0, 
        linkedTo: ':previous', 
        color: Highcharts.getOptions().colors[0], 
        fillOpacity: 0.3, 
        zIndex: 0 
       }] 
      }); 

js fiddle url

Пожалуйста, помогите мне, как использовать диапазон дат с графиком Area. Спасибо.

Answer 1

Это потому, что rangeSelector для HighStock только и не Highcharts. Таким образом, вы должны изменить свой сценарий, чтобы:

<script src="http://code.highcharts.com/stock/highstock.js"></script> 

И добавить StockChart слово в функции создания диаграммы:

$('#container').highcharts('StockChart', { ... }); 

Вот обновленный fiddle