【问题标题】:how to use highstock in ecmascript?如何在 ecmascript 中使用 highstock?
【发布时间】:2020-05-16 10:46:14
【问题描述】:

这是一个有效的代码示例,我创建了一个图表

import $ from 'jquery';
import Highcharts from 'highcharts';

class test {
    constructor(){
        let chart = new Highcharts.chart('container', {
            chart: {
                animation: false
            },

            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },

            series: [{
                data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
            }]

        });
    }
}

现在我想做一个stockChart,比如https://jsfiddle.net/74vn5utd/

但我导入了它和它的模块

import StockChart from 'highcharts/highstock';
import datahc from 'highcharts/modules/data';

然后我加载模块

datahc(StockChart);

最后我调用图表和

StockChart.chart('container', {


    rangeSelector: {
        selected: 1
    },

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

    series: [{
        name: 'AAPL',
        data: response.graph,
        tooltip: {
           valueDecimals: 2
        }
    }]
});

我有一个常规图表,而不是 HighStock 图表,我不明白,有什么问题?

提前致谢

【问题讨论】:

    标签: javascript ecmascript-6 highcharts ecmascript-next


    【解决方案1】:

    您仍然使用创建常规图表的 chart 构造函数。

    尝试使用 StockChart.stockChart('container, {...}),其中 stockChart 是 Highstock 构造函数。

    演示:https://jsfiddle.net/BlackLabel/v4qbyka6/

      Highcharts.stockChart('container', {
    
        series: [{
            data: data
        }]
      });
    

    【讨论】:

    • 嗨@Sebastian,它不是ecmascript :) 在ecmascript 中它无法识别函数stockChart,请在回答后仔细阅读我的问题,谢谢
    • @Emiliano 您能否澄清一下您认为 ecmascript 的含义?因为据我所知,ECMAScript 是一种标准化的脚本语言规范,它的创建是为了标准化 JavaScript 以帮助促进多个独立的实现。在您共享的代码部分中,您使用的是 JavaScript 方法的 import 和 class 方法,就像我在上面发送给您的演示中使用的方法一样。您是否尝试过实现我在上述帖子中建议的代码(构造函数)?你能分享一下你的尝试吗?
    • javascript新版本,javascript 2016还是2017,我的问题已经有例子了,不知道你要什么样的例子。
    • @Emiliano ES6 是一个重大更新,它为 JS 添加了新功能,例如引入 const、let、箭头函数、类等。我不明白您为什么建议我分享给您的示例是不是 ECMAScript。如果您需要使用类而不是基本函数,请继续。我将向您展示如何将 HighStock 作为 ECMAScript 模块导入并使用 stockChart 构造创建 Highstock 图表的示例。文档:api.highcharts.com/class-reference/#toc4
    猜你喜欢
    • 2023-03-13
    • 1970-01-01
    • 2014-07-23
    • 1970-01-01
    • 1970-01-01
    • 2016-01-17
    • 1970-01-01
    • 1970-01-01
    • 2015-09-23
    相关资源
    最近更新 更多