acb_5445
acb_5445
采纳率25%
2017-05-24 03:23 阅读 2.1k
已采纳

用js的highcharts或者echarts实现折线图,想根据数据的增多实现平移的效果

5

如题,类似股票的K线图,随着数据变多,历史数据向左移动,用highcharts或者echarts怎么实现,其他js技术也可以,求大神!!!

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    qq_29594393 当作看不见 2017-05-24 03:39

    echarts ,配置好 ,--> 官方教程,直接复制粘贴的,数据的增多,平移,设置series里面的data 数组 ,push shift,对数组修改,setOption 就能实现上述效果.
    实例
    http://echarts.baidu.com/demo.html#dynamic-data2

    点赞 2 评论 复制链接分享
  • qq_29060627 qq_29060627 2017-06-22 11:44

    大神,可以贡献模版代码吗?

    点赞 评论 复制链接分享
  • qq_29060627 qq_29060627 2017-06-22 11:45

    function randomData() {
    now = new Date(+now + oneDay);
    value = value + Math.random() * 21 - 10;
    return {
    name: now.toString(),
    value: [
    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
    Math.round(value)
    ]
    }
    }

    var data = [];
    var now = +new Date(1997, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var value = Math.random() * 1000;
    for (var i = 0; i < 1000; i++) {
    data.push(randomData());
    }

    option = {
    title: {
    text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
    trigger: 'axis',
    formatter: function (params) {
    params = params[0];
    var date = new Date(params.name);
    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
    },
    axisPointer: {
    animation: false
    }
    },
    xAxis: {
    type: 'time',
    splitLine: {
    show: false
    }
    },
    yAxis: {
    type: 'value',
    boundaryGap: [0, '100%'],
    splitLine: {
    show: false
    }
    },
    series: [{
    name: '模拟数据',
    type: 'line',
    showSymbol: false,
    hoverAnimation: false,
    data: data
    }]
    };

    setInterval(function () {

    for (var i = 0; i < 5; i++) {
        data.shift();
        data.push(randomData());
    }
    
    myChart.setOption({
        series: [{
            data: data
        }]
    });
    

    }, 1000);

    点赞 评论 复制链接分享

相关推荐