highcharts小技巧

来源：互联网发布：ubuntu terminal替换编辑：程序博客网时间：2024/06/06 07:41

定义一个图表 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>

0 0