【问题标题】:Unable to set timezone in Highcharts graph无法在 Highcharts 图表中设置时区
【发布时间】:2018-12-11 18:12:34
【问题描述】:

我想在 Highchart 图表中设置时区“America/Los_Angeles”,我不想显示默认客户端浏览器时区。为此,我将库 moment.js 添加到代码中。但是当我运行它时,我遇到了错误。

Uncaught TypeError: n.tz is not a function
    at a.Time.getTimezoneOffset (highstock.js:97)
    at a.Time.timezoneOffset.set (highstock.js:95)
    at a.Time.getTimeTicks (highstock.js:99)
    at F.C.getTimeTicks (highstock.js:166)
    at F.<anonymous> (highstock.js:393)
    at F.a.(anonymous function) [as getTimeTicks] (https://url/highstock-6.0.5/highstock.js:19:376)
    at F.setTickPositions (highstock.js:139)
    at F.<anonymous> (highstock.js:404)
    at F.a.(anonymous function) [as setTickPositions] (https://url/highstock-6.0.5/highstock.js:19:376)
    at F.setTickInterval (highstock.js:138)

以下是我正在使用的 Highchart 图形代码

window.moment = moment;    

Highcharts.chart('chart1', {
                chart: {
                    type: 'area',
                    zoomType: 'x'
                },
          time: {
                    timezone: 'America/Los_Angeles'
                },
                title: {
                    text: 'graph'
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                            'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                },
                xAxis: {
                    type: 'datetime'
                },
                yAxis: {
                    title: {
                        text: 'Attack Size'
                    }
                },
                tooltip: {
                    formatter: function () {
                         return  Highcharts.dateFormat('%b %e, %H:%M',new Date(this.x))+ '<br/> Attack <b>' + this.y + ' ]';
                   } 
                },
                credits: {
                    enabled: false
                  },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    area: {
                    pointStart: 1940,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                                }
                            }
                        }
                    },
                    series:{
                        turboThreshold:4000
                    }
                },
                series: [{
                    name: 'Description',
                    data: data
                }]
            });

【问题讨论】:

  • 无法复制:jsfiddle.net/ewolden/vk97rsnp/1。也就是说,这:pointStart: 1940, 并不意味着您认为它对日期时间轴意味着什么。将pointStart 设置为1940 意味着该点在1970-01-01 00:00:00 之后从1.940 seconds 开始。如果你想要 1940 年,最好这样做:Date.UTC(1940)

标签: javascript highcharts timezone momentjs


【解决方案1】:

错误.tz is not a function表示tz函数在moment对象上不可用,可能是因为Moment-Timezone还没有安装。

您需要同时导入moment.jsmoment-timezone-with-data(或moment-timezone-with-data-2012-2020 等),如the moment-timezone docs 中所述。

【讨论】:

    猜你喜欢
    • 2022-11-17
    • 2023-01-12
    • 2013-04-16
    • 2011-09-03
    • 1970-01-01
    • 1970-01-01
    • 2013-05-18
    • 1970-01-01
    • 2022-11-02
    相关资源
    最近更新 更多