Highcharts xAxis

Question

我正在使用 Highcharts 进行一些图表，特别是 Spline with plot bands。相关的jsfiddle可以在here找到。

$(function () {
$('#container').highcharts({
    chart: {
        type: 'spline'
    },
    title: {
        text: 'Wind speed during two days'
    },
    subtitle: {
        text: 'May 31 and and June 1, 2015 at two locations in Vik i Sogn, Norway'
    },
    xAxis: {
        type: 'datetime',
        labels: {
            overflow: 'justify'
        }
    },
    yAxis: {
        title: {
            text: 'Wind speed (m/s)'
        },
        minorGridLineWidth: 0,
        gridLineWidth: 0,
        alternateGridColor: null,
        plotBands: [{ // Light air
            from: 0.3,
            to: 1.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: 'Light air',
                style: {
                    color: '#606060'
                }
            }
        }, { // Light breeze
            from: 1.5,
            to: 3.3,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: 'Light breeze',
                style: {
                    color: '#606060'
                }
            }
        }, { // Gentle breeze
            from: 3.3,
            to: 5.5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: 'Gentle breeze',
                style: {
                    color: '#606060'
                }
            }
        }, { // Moderate breeze
            from: 5.5,
            to: 8,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: 'Moderate breeze',
                style: {
                    color: '#606060'
                }
            }
        }, { // Fresh breeze
            from: 8,
            to: 11,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: 'Fresh breeze',
                style: {
                    color: '#606060'
                }
            }
        }, { // Strong breeze
            from: 11,
            to: 14,
            color: 'rgba(0, 0, 0, 0)',
            label: {
                text: 'Strong breeze',
                style: {
                    color: '#606060'
                }
            }
        }, { // High wind
            from: 14,
            to: 15,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: 'High wind',
                style: {
                    color: '#606060'
                }
            }
        }]
    },
    tooltip: {
        valueSuffix: ' m/s'
    },
    plotOptions: {
        spline: {
            lineWidth: 4,
            states: {
                hover: {
                    lineWidth: 5
                }
            },
            marker: {
                enabled: false
            },
            pointInterval: 3600000, // one hour
            pointStart: Date.UTC(2015, 4, 31, 0, 0, 0)
        }
    },
    series: [{
        name: 'Hestavollane',
        data: [0.2, 0.8, 0.8, 0.8, 1, 1.3, 1.5, 2.9, 1.9, 2.6, 1.6, 3, 4, 3.6, 4.5, 4.2, 4.5, 4.5, 4, 3.1, 2.7, 4, 2.7, 2.3, 2.3, 4.1, 7.7, 7.1, 5.6, 6.1, 5.8, 8.6, 7.2, 9, 10.9, 11.5, 11.6, 11.1, 12, 12.3, 10.7, 9.4, 9.8, 9.6, 9.8, 9.5, 8.5, 7.4, 7.6]

    }, {
        name: 'Vik',
        data: [0, 0, 0.6, 0.9, 0.8, 0.2, 0, 0, 0, 0.1, 0.6, 0.7, 0.8, 0.6, 0.2, 0, 0.1, 0.3, 0.3, 0, 0.1, 0, 0, 0, 0.2, 0.1, 0, 0.3, 0, 0.1, 0.2, 0.1, 0.3, 0.3, 0, 3.1, 3.1, 2.5, 1.5, 1.9, 2.1, 1, 2.3, 1.9, 1.2, 0.7, 1.3, 0.4, 0.3]
    }],
    navigation: {
        menuItemStyle: {
            fontSize: '10px'
        }
    }
});

});

我需要图表来显示时间而不是时间 - 50 分钟（以分钟为间隔）。也就是说最右边的数据点是时间=现在，最左边的是时间-50分钟。

添加样条数据不是问题，但我无法为 xAxis 添加正确的数据。

我拥有的日期数据以毫秒 (1456783080016000) 为单位，但将其放入图表的最佳方式是什么，请记住该图表每分钟更新一次，xAxis 也必须如此。

我看到的代码表明你可以像这样更新它：

Highcharts.charts[0].xAxis[0].update({categories:['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']}, true);

如何在此更新中添加日期日期？

我这个问题的第二部分是 pointInterval 和 pointStart。

我假设 pointInterval 是一分钟或（60000 毫秒），而点 pointStart: Math.abs(new Date().getTime() - 3000000) 现在是时间减去 50 分钟（3000000 毫秒）。

这似乎不起作用，所以任何建议表示赞赏。

Answer 1

我会使用xAxis.tickPositioner 和xAxis.labels.formatter 来获得所需的结果。片段：

    xAxis: {
        type: 'datetime',
        tickInterval: 600000, // get every 10th tick
        tickPositioner: function (min, max) {
          var ticks = [],
              interval = this.tickInterval;

          while (max >= min) {
            ticks.push(max);
            max -= interval;
          }
          return ticks.reverse(); 
        },
        labels: {
          formatter: function() {
            var max = this.axis.max,
                diff = max - this.value;

            if (diff === 0) {
                return 'Now';
            }
            return '-' + Highcharts.dateFormat('%M', diff) + 'mins';     
          }
        }
    },

还有现场演示：http://jsfiddle.net/tdmjm9pn/1/

如果有什么不清楚的地方请告诉我。

Answer 2

你可以试试类似下面的方法

$(function() {
  $('#container').highcharts({
    xAxis: {
      categories: [1373155200000, 1373241600000, 1373328000000, 1373414400000, 1373500800000, 1373587200000, 1373673600000, 1373760000000, 1373846400000, 1373932800000, 1374019200000, 1374105600000],
      type: 'datetime',
      labels: {
        formatter: function() {
          var d = new Date(this.value);
          return d.toDateString();
        }
      }
    },

    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]
    }]
  });
});

Fiddle link