利用highcharts实现实时动态折线图

最新推荐文章于 2023-12-12 08:56:49 发布

jacksonary

最新推荐文章于 2023-12-12 08:56:49 发布

阅读量5k

点赞数 1

分类专栏：前端文章标签： ajax 数据 highcharts

本站已迁移至：https://jacksonary.github.io

本文链接：https://blog.csdn.net/jacksonary/article/details/75647624

版权

本文介绍了如何通过Ajax轮询后台接口，结合Highcharts库实现实时动态折线图的展示，详细阐述了从获取数据到渲染图表的全过程。

摘要由CSDN通过智能技术生成

我这里是利用的ajax进行轮询的机制实现的：

<!-- highChart插件的使用 ，这个是可以实现动态数据的更新-->
<script type="text/javascript">

//请求后获取数据,以便后面使用
var mydata = null;

var mychart = null;

Highcharts.setOptions({
    global: {
   //横轴为时间轴，下面的语句是设置时区
        useUTC: false
    }
});

function activeLastPointToolip(chart) {
    
    var points = chart.series[0].points;
    chart.tooltip.refresh(points[points.length -1]);
}

var options = {
    chart: {
        type: 'spline',
        renderTo: 'main',
        animation: Highcharts.svg, 
        marginRight: 10,
        events: {
            load: function () {
    //load表示的是在图表加载完时触发
                var series = this.series[0],
                    chart = this;

                    /* 
                    setInterval(function () {//setInterval是设置定时、延时,会不停的调用函数或者表达式
                    var x =