highchart动态生成图形

最新推荐文章于 2024-07-10 21:37:49 发布

生活定律，

最新推荐文章于 2024-07-10 21:37:49 发布

阅读量186

点赞数

分类专栏： highchart动态生成图形文章标签： java ajax js

本文链接：https://blog.csdn.net/XhLmx/article/details/103825216

版权

Highcharts之动态数据实时折线图(时间折线图)

一、前言

想要实现的效果是，每秒钟动态获取后台数据，进行显示，在网上找了下，先看了下Echarts的效果：
http://echarts.baidu.com/examples/editor.html?c=dynamic-data2
在这里插入图片描述
这种效果，还行，我想显示的有3条数据，然后又看下了Highcharts，发现了他也有这种效果：
https://www.highcharts.com/demo/dynamic-update

然后我在他的示例上修改成了如下：

两个Y轴显示文字。

二、源码

代码如下：

<!DOCTYPE HTML> <html> <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Highcharts Example</title>
        <style type="text/css">
        </style> </head> <body> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <script
    src="${ctxPath}/static/code/highcharts.js"></script> <script
    src="${ctxPath}/static/code/modules/exporting.js"></script> <script
    src="${ctxPath}/static/code/modules/export-data.js"></script>   <div
    id="container" style="min-width: 310px; height: 400px; margin: 0
    auto"></div>   <script type="text/javascript">
        Highcharts.setOptions({
   
            global: {
   
                useUTC: false
            }
        });
        var max=6;
        Highcharts.chart('container', {
   
            chart: {
   
                type: 'spline',
                animation: Highcharts.svg, 
                events: {
   
                    load: function() {
   
                        var series = this.series;
                        var loadData = function() {
   
                            $.getJSON("http://localhost:8089/echarts/vintage", function(data) {
   
                                for (var k = 0; k < series.length; k++) {
   
                                    console.info(data.length)
                                    for (var j = 0; j < data[k].length; j++) {
   
                                        var point = data[k][j];
                                        console.info(point)
                                        console.info(point[0])
                                        console.info(point[1])
                                        var isShift = series[k].data.length >= max;
                                        console.log("series " + k + ".data.length=" + series[k].data.length);
                                        var lastTime = 0;
                                        if (series[k].data.length > 0)
                                            lastTime = series[k].data[series[k].data.length - 1].x;
                                        if (point[0] > lastTime)
                                            series[k].addPoint([point[0],point[1]], true, isShift);
                                    }
                                }
                            })
                        };
                        loadData();
                        setInterval(loadData, 1000);
                    }
                }
            },
            title: {
   
                text: '访问量实时监控'
            },
            xAxis: [
                {
   
                    type: 'datetime',
                    tickPixelInterval: 120
                }
            ],
            yAxis: [
                {
   
                    title: {
   
                        text: '总请求/分钟',
                        style: {
   
                            color: '#3E576F'
                        }
                    }
                },
                {
   
                    title: {
   
                        text: '平均响应时间',
                        style: {
   
                            color: '#00AA00'
                        }
                    },opposite:true
                }
            ],
            plotOptions: {
   
                spline: {
   
                    marker:{
   
                        enabled: false,
                        states: {
   
                            hover: {
   
                                enabled: true,
                                symbol: 'circle'

最低0.47元/天解锁文章

生活定律，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
highchart动态生成图形

Highcharts之动态数据实时折线图(时间折线图)一、前言想要实现的效果是，每秒钟动态获取后台数据，进行显示，在网上找了下，先看了下Echarts的效果：http://echarts.baidu.com/examples/editor.html?c=dynamic-data2这种效果，还行，我想显示的有3条数据，然后又看下了Highcharts，发现了他也有这种效果：https:/...
复制链接

扫一扫