Question

我正在使用highchart进行动态更新。有没有办法，在标记出现之前，该行将在下一个点首先出现？目前正在发生的事情是，标记首先出现在线连接之前的点上。

$(document).ready(function () {
Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = Math.random();
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: Math.random()
                });
            }
            return data;
        }())
    }]
});
});

并且如果我有办法在中心移动线条移动，那么右侧将始终为空白，如下图所示

请参阅此link 。感谢您的帮助。谢谢。

Answer 1

可以通过轴minPadding（左侧空格）和maxPadding（右侧空格）实现间距。

xAxis: {
  type: 'datetime',
  tickPixelInterval: 150,
  maxPadding: 0.5
},

对于动画 - 您可以使用禁用的标记添加点，然后设置超时，动画结束后将触发，并启用标记。

    load: function() {

      // set up the updating of the chart each second
      var series = this.series[0];
      setInterval(function() {
        var x = (new Date()).getTime(), // current time
          y = Math.random();

        series.addPoint({
          x: x,
          y: y,
          marker: {
            enabled: false
          }
        }, true, true);

        setTimeout(() => series.data[series.data.length - 1].update({marker: {enabled: true}}, true, false), 500)
      }, 1000);
    }

默认情况下，添加点的动画设置为500，因此如果更改动画广告，则需要更改setTimeout中的延迟参数。

示例：http://jsfiddle.net/687215jj/1/

在标记出现之前绘制线条Highchart

1 个答案: