代码之家  ›  专栏  ›  技术社区  ›  thehme

如果标签不匹配X轴,如何正确地绘制高图表中的UTC数据?

  •  1
  • thehme  · 技术社区  · 6 年前

    我有一系列数据点(UTC日期和值),需要使用Highcharts绘制,默认情况下使用UTC但是,数据可能位于不同的用户时区,因此在本例中,我将其设置为纽约。我注意到,即使我的每个数据点上的工具提示都是正确的,例如10/26的数据点,其中一些数据点似乎被绘制在对应于10/27的绘图部分。我希望10/26的9个数据点都在10/17点之前绘制出来有人在我的代码中看到这个问题吗?我创建了一个jsiffle来清楚地说明这个问题。

    var timeZone = 'America/New_York';
    var timeZoneOffsetValue = moment(values[0].data[0][0]).tz("America/New_York")._offset;
    console.log(timeZoneOffsetValue);
    Highcharts.chart('container', {
            yAxis: {
            gridLineWidth: 0.5,
          gridLineColor: '#D6D6D6',
          tickInterval: 5,
          dashStyle: 'LongDash',
          lineColor: '#D6D6D6'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
              day: '%m/%d',
              week: '%d/%b',
              month: '%b/%y',
              year: '%Y'
            },
            title: {
              enabled: true,
              text: 'date'
            },
            gridLineWidth: 0,
            lineColor: '#D6D6D6',
            lineWidth: 0.5,
            startOnTick: true
        },
        plotOptions: {
            scatter: {
              marker: {
                radius: 5,
                states: {
                  hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                  }
                }
              },
              states: {
                hover: {
                  marker: {
                    enabled: false
                  }
                }
              },
              tooltip: this.toolTip
            }
        },
        chart: {
            marginTop: 5,
            marginRight: 0,
            reflow: false,
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            style: {
              fontFamily: 'Open Sans'
            },
            type: 'scatter',
            spacingBottom: 0,
            spacingTop: 0,
            spacingLeft: 0,
            spacingRight: 0
        },
        tooltip: {
            formatter: function () {
                var time = new Highcharts.setOptions({
                  global: {
                    timezoneOffset: -timeZoneOffsetValue
                  }
                }, this);
    
                var s = '<b>' + Highcharts.dateFormat('%m/%d %H:%M:%S', this.x) 
                + ' - ' + Highcharts.numberFormat(this.y, 2);
                return s;
            },
        },
        series: values
    });
    

    http://jsfiddle.net/thehme/a47Lbnwr/25/

    注: 在我的实际代码中,我注意到有时当我第一次加载绘图时,3个数据点大部分时间都在10/27槽中,但是如果我重新加载绘图,那么有时数据点会移动到10/16日期范围。这就是让这更令人困惑的原因。

    0 回复  |  直到 6 年前