2016-12-17 17 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

真棒,非常感謝你! – iGanza