基于highcharts.js多条曲线（或柱状）动态图（时序图）

最新推荐文章于 2025-07-02 22:43:54 发布

原创最新推荐文章于 2025-07-02 22:43:54 发布 · 9.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts 动态多条曲线时

源代码同时被 3 个专栏收录

18 篇文章

订阅专栏

JSP

1 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

本文介绍如何使用Highcharts库实现动态XY曲线图表展示，包括实时更新数据、设置历史数据缓存及自定义时间格式等功能。

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

Highcharts 是一个用纯JavaScript编写的一个图表库，在web前端展示中可以做出很炫的图表，目前手头有一个指标监控项目，需要采用动态展示(典型XY曲线，时间轴)。贡献出一个例子供大家参考，本例子是参考highchart官方动态显示示例。

实现的方法：由于指标显示不尽一致，例如有些是CPU时间，交易量，等等。但又有一些相似之处，如都是XY型（时间为X），都包含基线（多条曲线）等，基于这种特征，需要写一个通用的接口，方便多指标复用通用展示模块。采用JSON格式交换数据。当然如果要做成动态柱状图，只需要把

 type : 'spline',

改为：

 type : 'column',

代码主要是HTML & JS。如下

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>实时界面</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>

js代码分析，

1.createXYTimeChartOptions函数，根据应用传递的参数定制图标的标题，坐标轴信息，有一个问题，显示的时候需要传递历史数据信息，需要给series设置缓存大小，用户可以根据需求设置（例如传递前十分钟数据），同时此函数里面可以自行修改时间格式(本例子最小单位为分钟)等等。

2.inputXYData2ChartSeries函数，动态给图中input数据。用户需要自行编写与后台对接的数据，并以JSON格式返回。

3.test_create_xy_time_chart示例函数，创建一个两条曲线的动态图

4.test_action()示例函数，动态加入随机数据

要求，jquery和highchart库

展示效果如下如：

realshow.js源码如下所示：

var chartSeries = new Array();
var prevTime = "";

function removeChartAttr() {
    $('#context_chart').removeAttr();
}

function createXYTimeChartOptions(appData) {
    Highcharts.setOptions({
        global : {
            useUTC : false
        }
    });
    var highchartOptions = {
        chart : {
            type : 'spline',
            animation : Highcharts.svg,
            marginRight : 20,
            events : {
                load : function() {
                    chartSeries = this.series;
                }
            }
        },
        title : {
            text : appData.title
        },
        legend : {
            enabled : true,
            align : 'center',
            verticalAlign : 'bottom',
            x : 0,
            y : 0
        },
        xAxis : {
            title : {
                text : appData.xTitle
            },
            type : 'datetime',
            tickWidth : 1,
            labels : {
                x : 0,
                y : 20,
                style : {
                    color : '#000000'
                },
                formatter : function() {
                    return Highcharts.dateFormat('%H:%M', this.value);//设置时间显示格式
                }
            }
        },
        yAxis : {
            title : {
                text : appData.yTitle//设置y轴标题
            },
            plotLines : [ {
                value : 0,
                width : 10,
                color : '#808080'
            } ]
        },
        tooltip : {//设置数据点tip效果，
            backgroundColor : '#FCFFC5',
            borderColor : 'black',
            borderRadius : 10,
            borderWidth : 3,
            shadow : true,
            animation : true,
            style : {
                color : "#ff0000",
                fontSize : "12px",
                fontWeight : "blod",
                fontFamily : "Courir new"
            },
            formatter : function() {
                return '<b>' + this.series.name + '</b><br/>' + 'Time: '
                        + Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x)
                        + '<br/>' + 'Value: '
                        + Highcharts.numberFormat(this.y, 1);
            }
        },
        credits : {
            enabled : false
        },
        exporting : {
            enabled : false
        },
        series : []
    };

    $.each(appData.series, function(index, value) {//这里用于设置显示历史缓冲区（历史数据，数组形式），也决定了数据点显示数目
        highchartOptions.series.push({
            name : value.name,
            data : value.data,
            lineWidth : 4,
        });
    });

    return highchartOptions;
}

function inputXYData2ChartSeries(data_time,data_json_array) {
    if(data_time == prevTime)
        return;
//    var x = (new Date(data_time.replace(/-/g, "/")));
//    x = x.getTime() - x.getSeconds() * 1000;
    $.each(data_json_array, function(index, val) {
        chartSeries[index].addPoint([data_time, val], true, true);
    });
    prevTime = data_time;
}

function test_action(){
    var currentDate = new Date();
    var x = currentDate.getTime() - currentDate.getSeconds() * 1000;
    var test_data = [];
    test_data.push(Math.random());
    test_data.push(Math.random());
    inputXYData2ChartSeries(x,test_data);
}

function test_create_xy_time_chart() {
    var input_json = {
        title : "Test",
        xTitle : "x title",
        yTitle : "y title",
        series : [],
    };
    var currentDate = new Date();
    var currentMinute = currentDate.getTime() - currentDate.getSeconds() * 1000;
    var data1 = [], time = currentMinute, i;
    for (i = -12; i <= 0; i++) {
        data1.push({
            x : time + i * 60000,
            y : Math.random()
        });
    }
    input_json.series.push({
        name : "line1",
        data : data1
    });
    var data2 = [], time = currentMinute, i;
    for (i = -12; i <= 0; i++) {
        data2.push({
            x : time + i * 60000,
            y : Math.random()
        });
    }
    input_json.series.push({
        name : "line2",
        data : data2
    });
    var highchart_options = createXYTimeChartOptions(input_json);
    $('#context_chart').show();
    $('#context_chart').highcharts(highchart_options);
    var chart = $('#context_chart').highcharts();
    
//加了一条告警线，垂直于Y轴
    chart.yAxis[0].addPlotLine({           
        value:0.5,                          
        width:4,                          
        color:'red',               
        id: 'plot-line-1'                 
    });
}
$(document).ready(function() {
    test_create_xy_time_chart();
    window.setInterval(test_action, 1 * 60000);

});

转载请注明出处：http://blog.youkuaiyun.com/ccfeng2008/article/details/51284122