毕竟我是萌萌哒啊_
2017-10-30 04:28
采纳率: 66.7%
浏览 2.4k

highcharts插件在动态曲线图上添加多条曲线时,只有最后一条曲线显示绘制动画

highcharts插件在动态曲线图上添加多条曲线时,只有最后一条曲线显示绘制动画图片说明

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 孤芳不自賞 2017-10-30 09:29

    在series下加入一条线,然后按照图片修改events中的load的 属性。我测试没有问题,代码如下:
    图片说明
    Highcharts.setOptions({
    global: {
    useUTC: false
    }
    });
    function activeLastPointToolip(chart) {
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length -1]);
    }
    $('#container').highcharts({
    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],
    series2 = this.series[1],
    chart = this;
    setInterval(function () {
    var x = (new Date()).getTime(), // current time
    y = Math.random();
    series.addPoint([x, y], true, true);
    series2.addPoint([x, Math.random()+2], true, true);
    activeLastPointToolip(chart)
    }, 1000);
    }
    }
    },
    title: {
    text: '动态模拟实时数据'
    },
    xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
    },
    yAxis: {
    title: {
    text: '值'
    },
    plotLines: [{
    value: 0,
    width: 1,
    color: '#808080'
    }]
    },
    tooltip: {
    formatter: function () {
    return '' + this.series.name + '
    ' +
    Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '
    ' +
    Highcharts.numberFormat(this.y, 2);
    }
    },
    legend: {
    enabled: false
    },
    exporting: {
    enabled: false
    },
    series: [{
    name: '随机数据',
    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;
    }())
    },
    {
    name: '随机数据2',
    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;
    }())
    }]
    }, function(c) {
    activeLastPointToolip(c)
    });

    评论
    解决 无用
    打赏 举报
  • 毕竟我是萌萌哒啊_ 2017-10-31 03:58

    图片说明两条线可能清楚点。我不知道这是哪里写的有问题。

    评论
    解决 无用
    打赏 举报
  • yuncheol_kim 2020-09-19 16:05

    series.addPoint([x, y], false, true)

    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题