highcharts小技巧

最新推荐文章于 2025-06-03 09:05:59 发布

原创最新推荐文章于 2025-06-03 09:05:59 发布 · 633 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

highcharts 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用Highcharts实现动态更新的数据曲线图，包括图表初始化配置、数据动态加载及曲线实时刷新等关键技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义一个图表 var chart ；

chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'container',
                    type: 'line' //line
                },
                title: {
                    text: '传感器数据曲线图'
                },
                subtitle: {
                    text: '来源: 传感器</a>'
                },
                xAxis: {
                    allowDecimals: false,
                    labels: {
                        formatter: function () {
                            return (new Date(this.value)).format('MM-dd hh:mm:ss'); // 格式化日期
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '温度（°C）'
                    },
                    labels: {
                        formatter: function () {
                            return this.value ;
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    pointFormat: '{series.name} 值 {point.y}'
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                plotOptions: {
                    line: {
                        pointStart: 1470731639000,
                        pointInterval: 1000,
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: []
            });

添加新曲线并刷新图表（true表示刷新，false不刷新），data是数据：

chart.addSeries({
                id:$scope.id,
                name: $scope.name,
                data: $scope.entitys
            }, true);

更新某一条曲线的方法，先删除这条曲线，然后重新给赋值：

<span style="white-space:pre">			</span>    chart.series[j].remove();//删除第j条曲线
                            chart.addSeries({
                                id:$scope.id,
                                name: $scope.name,
                                data: $scope.entitys
                            }, true);

更新某条曲线还可以新增曲线的点，进行刷新：

<!DOCTYPE HTML>
<html>
    
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        <title> Highcharts + Ajax + Servlet Demo </title>
        <script type="text/javascript" src="./jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#container').highcharts({
                    chart: {
                        type: 'spline',
                        marginRight: 150,
                        marginLeft: 150,
                        marginBottom: 25,
                        animation: Highcharts.svg,
                        
                        events: {
                            load: function() {


                                // 若有第3条线，则添加
                                // var series_other_property = this.series[2]
                                // 并在 series: [] 中添加相应的 (name, data) 对
                                var series_cpu = this.series[0];
                                var series_mem = this.series[1];


                                // 定时器，每隔1000ms刷新曲线一次
                                setInterval(function() {


                                    // 使用JQuery从后台Servlet获取
                                    // JSON格式的数据，
                                    // 如 "{"cpu": 80,"mem": 10}"
                                    jQuery.getJSON('./SomeServlet?action&parameter', null,
                                    function(data) {


                                        // 当前时间，为x轴数据
                                        var x = (new Date()).getTime();


                                        // y轴数据
                                        var cpu = data.cpu;
                                        var mem = data.mem;


                                        // 更新曲线数据
                                        series_cpu.addPoint([x, cpu], true, true);
                                        series_mem.addPoint([x, mem], true, true);
                                    });
                                },
                                1000/*启动间隔，单位ms*/
                                );
                            }
                        }
                    },
                    title: {
                        text: '使用率(%)',
                        x: -20
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: '使用率(%)'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        valueSuffix: '%'
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                    },
                    series: [
                    // 第1条曲线的(name, data)对
                    {
                        name: 'CPU',
                        data: (function() {
                            var data = [],
                            time = (new Date()).getTime(),
                            i;


                            // 给曲线y值赋初值0
                            for (i = -9; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    cpu: 0
                                });
                            }
                            return data;
                        })()
                    },


                    // 第2条曲线的(name, data)对
                    {
                        name: '内存',
                        data: (function() {
                            var data = [],
                            time = (new Date()).getTime(),
                            i;


                            // 给曲线y值赋初值0
                            for (i = -9; i <= 0; i++) {
                                data.push({
                                    x: time + i * 1000,
                                    y: 0
                                });
                            }
                            return data;
                        })()
                    },
                    ]
                });
            });
        </script>
        <style>
            html,body { margin:0px; height:100%; }
        </style>
    </head>
    
    <body>
        <script src="./Highcharts/js/highcharts.js"></script>
        <script src="./Highcharts/js/modules/exporting.js"></script>
        <div id="container" style="min-width: 400px; height: 80%; margin: 0 auto">
        </div>
    </body>


</html>