Question

这是我的代码工具提示给出正确的值，但图表不正确

Highcharts.chart('container5', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Sleep Graph'
    },
    xAxis: {
        categories: ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday', 'Monday', 'Tuesday', ]
    },
    yAxis: {
            title: {
                text: 'Data-Time'
            },
            type: 'datetime',
            dateTimeLabelFormats: {
              minute: '%H:%M:%S',
              hour: '%H:%M:%S',
              day: '%H:%M:%S',
              week: '%H:%M:%S',
              month: '%H:%M:%S',
              year: '%H:%M:%S'             
            },            
            // labels: {
            //   format: '{value:%Y-%b-%e}'
            // },
            min : Date.UTC(2017,0,1,18,0),
        },
    tooltip: {
        formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                Highcharts.dateFormat('%H:%M:%S', this.y) +': '+ this.x;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: false,
                color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
            }
        }
    },
    series: [{
        name: 'Awake',
        data: [Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,08,00), ],  
    }, {
        name: 'Sleep',
        data: [Date.UTC(2017,0,2,08,20), Date.UTC(2017,0,2,08,20), Date.UTC(2017,0,2,06,15), Date.UTC(2017,0,2,06,15), Date.UTC(2017,0,2,08,25), Date.UTC(2017,0,2,08,10), Date.UTC(2017,0,2,06,35), ],
    }, {
        name: 'Bed Time',
        data: [Date.UTC(2017,0,1,21,00), Date.UTC(2017,0,1,20,00), Date.UTC(2017,0,1,22,00), Date.UTC(2017,0,1,19,00), Date.UTC(2017,0,1,20,00), Date.UTC(2017,0,1,22,00), Date.UTC(2017,0,1,21,00), ],
    }    
    ]
});

Answer 1

您应该提及 pointStart 和指向间隔 这里有一些问题

data: [Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,07,30), Date.UTC(2017,0,2,09,30), Date.UTC(2017,0,2,10,00), Date.UTC(2017,0,2,08,00), ],

此示例可能对您有所帮助。 http://jsfiddle.net/gh/get/jquery/2/highcharts/highcharts/tree/master/samples/highcharts/xaxis/datetimelabelformats/

Answer 2

您的值是时间戳（从UTC时间01.01.1970 00:00 UTC开始的毫秒数）。 Highcharts堆叠机制从具有相同x值的所有点得到一个总和 - 因此在这种情况下它会添加时间戳。这就是为什么当你评论dateTimeLabelFormats代码部分时，你的y轴会得到2060这样的值。

此代码：

var d1 = Date.UTC(2017, 0, 1),
  d2 = Date.UTC(2017, 0, 2),
  format = '%Y.%m.%d %H:%M  ';
console.log(Highcharts.dateFormat(format, d1), Highcharts.dateFormat(format, d2), Highcharts.dateFormat(format, d1 + d2));

输出：

2017.01.01 00:00   2017.01.02 00:00   2064.01.03 00:00

type: 'datetime'只是Highcharts如何格式化标签的信息 - 所有计算都是在时间戳上执行的（正常的＆＃39;整数）。

可能的解决方案

您可以停用grouping，而不是使用stacking：

  plotOptions: {
    column: {
      //stacking: 'normal',
      grouping: false
    }
  }

实时工作示例： http://jsfiddle.net/kkulig/7xkt2p0e/

API参考： https://api.highcharts.com/highcharts/plotOptions.column.grouping

高图表堆栈列日期时间问题

2 个答案: