2016-12-17 5 views
1

Я пытаюсь сделать график с помощью Hightcharts.js, но получаю сообщение об ошибкеHighcharts.stockChart не является функцией

TypeError: Highcharts.stockChart is not a function.

установить его с помощью NPM (package.json)

"highcharts": "^5.0.6" 

Сall

var Highcharts = require('highcharts'); 

И использовать

var options = { 
    chart: { 
     alignTicks: false, 
     renderTo: 'container' 
    }, 

    rangeSelector: { 
     selected: 1 
    }, 

    title: { 
     text: 'AAPL Stock Volume' 
    }, 

    series: [{ 
     type: 'column', 
     name: 'AAPL Stock Volume', 
     data: [], 
     dataGrouping: { 
      units: [[ 
       'week', // unit name 
       [1] // allowed multiples 
      ], [ 
       'month', 
       [1, 2, 3, 4, 6] 
      ]] 
     } 
    }]; 
}; 
var chart = Highcharts.stockChart(options); 

Highstock не является отдельным модулем и принадлежит Highcharts, я не понимаю, в чем проблема?

ответ

1

Highstock не является отдельным модулем и принадлежит к Highcharts. Это неправда.

Но наоборот. если вы включите Highstock, вам не нужно снова включать Highcharts.

В соответствии с Highcharts документаций

http://www.highcharts.com/docs/getting-started/installation

Highcharts уже включен в Highstock, так что нет необходимости загружать оба. Файл highstock.js входит в пакет.

$(document).ready(function(){ 
 
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) { 
 
     // Create the chart 
 
     
 
     var dataObject = { 
 
      rangeSelector: { 
 
       selected: 1, 
 
       inputEnabled: $('#container').width() > 480 
 
      }, 
 
      
 
      title: { 
 
       text: 'AAPL Stock Price' 
 
      }, 
 
      
 
      series: [{ 
 
       name: 'AAPL', 
 
       data: data, 
 
       tooltip: { 
 
        valueDecimals: 2 
 
       } 
 
      }] 
 
      
 
      , 
 
      
 
      chart: { 
 
       renderTo: 'container' 
 
      } 
 
      
 
     }; 
 
     
 
     var chart = new Highcharts.stockChart(dataObject); 
 
    }); 
 
    });
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.6/css/highcharts.css" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.6/js/highstock.js"></script> 
 

 
<div id="container" style="height: 400px; min-width: 310px"></div>

+0

Awesome, большое спасибо! – iGanza

Смежные вопросы