ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript-Highcharts.stockChart不是函数

2019-10-26 11:47:09  阅读:572  来源: 互联网

标签:charts highcharts javascript


我正在尝试使用Hightcharts.js制作图表,但出现错误

TypeError: Highcharts.stockChart is not a function.

我使用npm(package.json)安装它

"highcharts": "^5.0.6"

全部

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,我不明白这可能是什么问题?

解决方法:

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>

标签:charts,highcharts,javascript
来源: https://codeday.me/bug/20191026/1936444.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有