Question

我正在制作一个显示费率的图表，它是一个使用日期时间轴的步骤图表，非常适合我需要做的事情。速率更改时只有数据点。我找不到让轴继续到特定日期时间的方法。示例可能是当前时间！第二个是我希望这条线也能继续到最后。要做到这一点似乎我需要人为地输入数据点来解决这两个问题。

所以一个实际的例子可能是你启动系统并且费率设置为10，你看一下这个图表一小时后你就会看到从开始时间到当前时间点。

http://jsfiddle.net/nexeh/hfeoryks/1/

$(function () {
$('#container').highcharts({
            chart: {
                zoomType: 'x',
                spacingRight: 20,
                type: 'area'
            },
            title: {
                text: 'Rate'
            },
             xAxis: {
                title: {
                    text: 'Time'
                },
                type: 'datetime'
            },
            yAxis: {
                labels: {
                    format: 'rate'
                }
            },

             plotOptions: {
                area: {
                    step: 'left'
                }
            },
            series: [{
                name: 'Time/Date',
                data: [[1456187667884,10],[1456187670916,10],[1456187671364,10],[1456187671562,10],[1456188795998,15],[1456188824877,0],[1456189436947,15],[1456189479375,25],[1456189597814,15],[1456189606222,0],[1456189626203,15],[1456191553211,0],[1456191604041,15],[1456191684985,22],[1456191911371,15],[1456191911922,0],[1456192571955,15],[1456192775431,19],[1456193247974,15],[1456193248525,0],[1456193273059,15],[1456198143933,0]]
            }]
        });

}）;

Answer 1

最简单的解决方案是使用给定的时间戳（例如当前时间）复制最后一个点。例如：http://jsfiddle.net/hfeoryks/3

段：

series: [{
  data: data
}]

现在应用更新的数据：

(function(H) {
  H.wrap(H.Series.prototype, 'init', function (p) {
    var options = arguments[2],
        UNDEFINED;
    if (options.data && options.endTime !== UNDEFINED) {
      options.data.push([options.endTime, options.data[options.data.length - 1][1]]);
    }
    p.apply(this, [].slice.call(arguments, 1));
  });
})(Highcharts)

======================

还有另一个解决方案，为Highcharts编写简单的插件，它将完全相同（在数组末尾添加额外的点）：

series.endTime

现在只需设置新选项series: [{ endTime: +new Date(), name: 'Time/Date', data: [ [1456187667884, 10], [1456187670916, 10], ... [1456193273059, 15], [1456198143933, 0] ] }]（或您喜欢称之为的任何内容）：

Ignore All

}）;

演示：http://jsfiddle.net/hfeoryks/6/

Highcharts：使Axis继续当前的日期时间

1 个答案: