使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

最新推荐文章于 2022-09-29 15:20:44 发布

weixin_30498921

最新推荐文章于 2022-09-29 15:20:44 发布

阅读量183

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/lovesqcc/p/4037728.html

版权

工作中用到，这里分享一下。可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图。当然，对图形没有过多装饰，可以参考 API 文档：

highcharts: Highcharts API

amcharts: amcharts API

0. 说明

amcharts 与 highcharts 对于数据格式的要求是不一样的。 amcharts 只需要一个对象数组 [{'x': 1, 'y': 2, 'z': 3}, {'x':2, 'y': 4, 'z': 6}]，并指明 x ,y 轴的字段名，其它的就交给 amcharts 了；而 highcharts 则需要对每个曲线图定义好二维数组 , [[1,2], [2,4]] , [[1,3], [2,6]] ; 如果要使用对象数组返回格式，就需要进行数据抽取和重组，以符合 highchart 的要求。

由于 javascript 所使用的标准数据格式是 JSON，因此，可以非常方便地进行数据拼接和组合。也就是说，如果要在同一坐标中绘制多个曲线图，只需要定义一个数组，将多个曲线图的数据加入数组即可。

实现中，有五点需要重点说明：

a. 时间字段。由于不同的API 返回的JSON数据中，时间的字段名不一定相同（比如有的为 time, 有的为 timestamp），并且时间的格式有所不同（比如有的为字符串，有的为时间戳），为了追求灵活性，需要使用一个日期转换函数 convertDate(chartData, timeStampFieldName, dateConvertFunc) 来统一处理。这里统一转换为 javascript timestamp 再转化为 Date 类型，可以兼容 Firefox 和 Chrome . 当然，具体转换为什么类型，要视采取的库支持决定。

b. 返回数据的格式，主要以对象数组为主；

c. 由于要绘制任意多个曲线图，这里也需要考虑到灵活性，利用了 JSON 格式的灵活性，采用循环方式加入多个曲线的配置项来实现；

d. 在实现中，尽可能基于已有库提供相同的使用接口，这样，就可以在多个选择中自由地切换；

e. 简单的框架性处理：通常显示多图时，一般会显示小图，然后点击后显示大图。这里，点击小图后显示大图，最好做成框架中的处理，客户端使用不必操心这种事情，也避免了将类似的代码分布在系统的各处。即尽量遵循“一个事实”的设计原则。

1. 返回数据格式 　　

{"result":{"msg":null,"code":200,"data":[{"__source__":"10.201.20.35","__time__":"1380446527","blocked":"0","plist":"1517","runq":"0","ldavg_1":"2.34","ldavg_5":"1.56","ldavg_15":"1.43","time":"Sun Sep 29 17:22:07 2013"},{"__source__":"10.201.20.35","__time__":"1380446587","blocked":"0","plist":"1524","runq":"5","ldavg_1":"2.38","ldavg_5":"1.69","ldavg_15":"1.48","time":"Sun Sep 29 17:23:07 2013"},{"__source__":"10.201.20.35","__time__":"1380446647","blocked":"0","plist":"1523","runq":"3","ldavg_1":"1.51","ldavg_5":"1.56","ldavg_15":"1.45","time":"Sun Sep 29 17:24:07 2013"}],"success":true}}

2. HTML DIV

<body>
        <div id="perfcharts">
            <div id="Loadperfchartdiv" style="width:100%; height:400px;" class="chartdiv"></div>
        </div>
    </body>

3. 使用 amcharts 绘制:

需要导入

<script src="../amcharts.js" type="text/javascript"></script>   
<script src="../jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="../drawchart.js" type="text/javascript"></script>

drawchart.js 是编写的基于 amcharts 的在同一坐标中绘制多图形的客户端接口:

/**
 * 使用 amcharts 绘制时间趋势曲线图
 * 
 * generateChart:
 *     chartDiv  绘图所需要的 DIV 区域名称;
 *     chartData 绘图所需要的数据
 *     chartConfig 绘图的全局配置对象
 *     lineConfigArray  每个曲线图的配置对象(配置Y轴)
 * 
 */
var globalChart = null, globalChartData = null;
function generateChart(chartDiv, chartData, chartConfig, lineConfigArray) {
        console.log('begin draw chart: ' + getNow());
        // SERIAL CHART
        var chart = new AmCharts.AmSerialChart();
        globalChart = chart;
        globalChartData = chartData;
        chart.pathToImages = "../resources/images/amcharts2/";
        chart.zoomOutButton = {
            backgroundColor: '#000000',
            backgroundAlpha: 0.15
        };
        chart.dataProvider = chartData;
        chart.categoryField = "timeStamp";

        // data updated event will be fired when chart is first displayed,
        // also when data will be updated. We'll use it to set some
        // initial zoom
        chart.addListener("dataUpdated", zoomChart);
       
        // AXES
        // Category
        var categoryAxis = chart.categoryAxis;
        categoryAxis.parseDates = true; // in order char to understand dates, we should set parseDates to true
        categoryAxis.minPeriod = "mm";  // as we have data with minute interval, we have to set "mm" here.             
        categoryAxis.gridAlpha = 0.07;
        categoryAxis.axisColor = "#DADADA";
        categoryAxis.labelFunction = function(valueText, date, categoryAxis) {
            var MM = date.getMonth()+1;
            var dd = date.getDate();
            var hh = date.getHours();
            if(hh<10) hh = '0' + hh;
            var mm = date.getMinutes();
            if(mm<10) mm = '0' + mm;
            var ss = date.getSeconds();
            return MM+'-'+dd+' '+hh+':'+mm;
        }
        
        // Value
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.gridAlpha = 0.07;
        valueAxis.title = chartConfig.title;
        chart.addValueAxis(valueAxis);

        // GRAPH
        for (var i=0; i<lineConfigArray.length;i++) {
            var graph = new AmCharts.AmGraph();
            graph.type = "line"; 
            graph.title = lineConfigArray[i].title;
            graph.valueField = lineConfigArray[i].valueField;
            graph.lineAlpha = 1;
            graph.lineColor = lineConfigArray[i].lineColor;
            chart.addGraph(graph);
        }

        // CURSOR
        var chartCursor = new AmCharts.ChartCursor();
        chartCursor.cursorPosition = "mouse";
        chartCursor.categoryBalloonDateFormat = "MM DD JJ:NN";
        chart.addChartCursor(chartCursor);

        // SCROLLBAR
        var chartScrollbar = new AmCharts.ChartScrollbar();
        chart.addChartScrollbar(chartScrollbar);
        
        // LEGEND
        var legend = new AmCharts.AmLegend();
        legend.marginLeft = 110;
        chart.addLegend(legend);
        
        // WRITE
        chart.write(chartDiv);
        console.log('end draw chart: ' + getNow());
    }

    function convertDate(chartData, timeStampFieldName, dateConvertFunc) {
        for (var i=0; i<chartData.length;i++) {
            var timeStamp_i = chartData[i][timeStampFieldName == null ? "timeStamp": timeStampFieldName];
            if (typeof dateConvertFunc === 'function') {
                chartData[i].timeStamp = dateConvertFunc(timeStamp_i);
            }
            else {
                chartData[i].timeStamp = new Date(timeStamp_i);
            }
        }
        return chartData;
    }

    function zoomChart() {
        globalChart.zoomToIndexes(0, globalChartData.length - 1);
    }

客户端使用方法：

AmCharts.ready(function () {
                    
                    var drawLoadperf = function() {
                        $.ajax({
                                dataType: "json",
                                url: httpPrefix + '/controllers/sls/obtainNcLoad',
                                data: 'Category=load_log_index&' + params,
                                success: function(data) {
                                    var chartData = convertDate(data.result.data, "time");
                                       generateChart('Loadperfchartdiv', chartData, 
                                                 {'title': 'Load'}, 
                                                 [{'title':'load_1', 'valueField': 'ldavg_1', 'lineColor': '#ff0000'},
                                                  {'title':'load_5', 'valueField': 'ldavg_5', 'lineColor': '#00ff00'},
                                                  {'title':'load_15', 'valueField': 'ldavg_15', 'lineColor': '#0000ff'}]);
                                 }
                        });    
                    }
}

amcharts 效果图：

4. 使用 highcharts 绘制:

需要导入:

<script src="../jquery-1.10.1.min.js" type="text/javascript"></script>
        <script src="../highcharts.js" type="text/javascript"></script>   
        <script src="../drawchart_highcharts.js" type="text/javascript"></script>

drawchart_highcharts.js 是基于 highcharts 的在同一坐标中绘制多个图形的客户端接口。点击可以放大显示，再点击则还原到原来的视图。

/**
 * 使用 highcharts 绘制时间趋势曲线图
 * 
 * generateChart:
 *     chartDiv  绘图所需要的 DIV 区域名称;
 *     chartData 绘图所需要的数据
 *     chartConfig 绘图的全局配置对象
 *     lineConfigArray  每个曲线图的配置对象(配置Y轴)
 * 
 */
Highcharts.setOptions({
    global: {
        useUTC: false
    },
    lang: {
        resetZoom: '还原视图'
    }
    
});
function generateChart(chartDiv, chartData, chartConfig, lineConfigArray) {
    var chartObj = {
        chart: {
            zoomType: 'x',
            events: {
                // 点击图表后在指定区域 zoomUpDiv 放大显示
                click: null
            }
        },
        // 去掉 highcharts.com 链接
        credits: {
            enabled: false,
            text: ''
        },
        plotOptions: {
            series: {
                // 去掉点的marker, 使图形更美观
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [],
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: {
                hour: '%m-%d %H:%M'
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            min: 0
        },
        tooltip: {
            crosshairs: true,
            shared: true,
            formatter: function() {  // 当鼠标悬停图表上时, 格式化提示信息
                var tipText = '<b>' + Highcharts.dateFormat('%m-%d %H:%M', this.x) + '</b>';
                $.each(this.points, function(i, point) {
                    tipText += '<br/>'+ point.series.name +': '+ point.y;
                });
                return tipText;
            }
        },
        title: {
            // 不显示图表标题
            text: null
        }
    };
    // 在同一坐标中绘制多个曲线图
    for (var i=0; i<lineConfigArray.length;i++) {
        var subseries = {
            name: lineConfigArray[i].title,
            data: extract(chartData, lineConfigArray[i].valueField),
            color: lineConfigArray[i].lineColor
        };
        chartObj.yAxis.title.text = chartConfig.title;
        chartObj.series.push(subseries);
    }
    // 点击图表后在指定区域 zoomUpDiv 放大显示
    chartObj.chart.events.click = function(event) {
        var zoomUpDiv = $('#zoomUpDiv');
        if (zoomUpDiv != null) {
            $('#zoomUpDiv').css('display', 'block');
            $('.chartdiv').css('display', 'none');
            chartObj.chart.events.click = function(event) {
                $('#zoomUpDiv').css('display', 'none');
                $('.chartdiv').css('display', 'block');
            };
            $('#zoomUpDiv').highcharts(chartObj);
        }
    };
    $("#"+chartDiv).highcharts(chartObj);
    
}

/**
 * 指定后台返回的时间字段为 timeStampFieldName , 若不指定则默认为 timeStamp , 
 * 并利用自定义回调函数 dateConvertFunc 统一为时间戳进行处理
 */
function convertDate(chartData, timeStampFieldName, dateConvertFunc) {
    for (var i=0; i<chartData.length;i++) {
        var timeStamp_i = chartData[i][timeStampFieldName == null ? "timeStamp": timeStampFieldName];
        if (typeof dateConvertFunc === 'function') {
            // 如果给定了自定义的时间转换回调函数, 则使用该函数
            chartData[i].timeStamp = dateConvertFunc(timeStamp_i);
        }
        else if (typeof timeStamp_i === 'number') {
            // 适用于时间戳
            chartData[i].timeStamp = timeStamp_i;
        }
        else {
            // 适用于格式 "Sun Sep 29 17:24:07 2013", "2013-09-29 17:23:09"
            chartData[i].timeStamp = new Date(timeStamp_i);
        }
    }
    return chartData;
}

/**
 * 从 chartData 中抽取出 valueField 数据
 */
function extract(chartData, valueField) {
    var valueData = [];
    var i=0, len = chartData.length;
    for (i=0; i<len; i++) {
        valueData.push([chartData[i].timeStamp, parseFloat(chartData[i][valueField])]);
    }
    return valueData;
}

客户端使用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>宿主机性能状态曲线图</title>
        <script src="../jquery-1.10.1.min.js" type="text/javascript"></script>
        <script src="../highcharts.js" type="text/javascript"></script>   
        <script src="../drawchart_highcharts.js" type="text/javascript"></script>
        <link rel="stylesheet" type="text/css" href="../resources/css/chart.css" />
        <script type="text/javascript">
            
            $(document).ready(function () {
                
                var iframeurl = parent.document.getElementById("ncperf").src
                var params = iframeurl.substring(iframeurl.lastIndexOf('?')+1);
                $(function () {
                    
                    var drawLoadperf = function() {
                        $.ajax({
                                dataType: "json",
                                url: httpPrefix + '/controllers/sls/obtainNcLoad',
                                data: 'Category=load_log_index&' + params,
                                success: function(data) {
                                    var chartData = convertDate(data.result.data, "time");
                                       generateChart('Loadperfchartdiv', chartData, 
                                                 {'title': 'Load'}, 
                                                 [{'title':'load_1', 'valueField': 'ldavg_1', 'lineColor': '#f58220'},
                                                  {'title':'load_5', 'valueField': 'ldavg_5', 'lineColor': '#00ff00'},
                                                  {'title':'load_15', 'valueField': 'ldavg_15', 'lineColor': '#0000ff'}]);
                                 }
                        });    
                    }
                    
                    var drawCpuperf = function() {
                        $.ajax({
                                 dataType: "json",
                                 url: httpPrefix + '/controllers/sls/obtainNcCpuUsage',
                                 data: 'Category=dom0_log_index&' + params,
                                 success: function(data) {
                                     var chartData = convertDate(data.result.data, "time");
                                        generateChart('CpuUsageperfchartdiv', chartData, 
                                                  {'title': 'Cpu 使用率(%)'}, 
                                                  [{'title':'usr', 'valueField': 'usr', 'lineColor': '#f58220'},
                                                   {'title':'sys', 'valueField': 'sys', 'lineColor': '#00ff00'},
                                                   {'title':'idle', 'valueField': 'idle', 'lineColor': '#0000ff'},
                                                   {'title':'iowait', 'valueField': 'iowait', 'lineColor': '#ffe600'}]);
                                  }
                        });
                    }
                    
                    var drawNetworkperf = function() {
                        $.ajax({
                                  dataType: "json",
                                  url: httpPrefix + '/controllers/sls/obtainNcNetworkflow',
                                  data: 'Category=netflow_log_index&' + params,
                                  success: function(data) {
                                      var chartData = convertDate(data.result.data, "time");
                                     generateChart('Networkflowchartdiv', chartData, 
                                               {'title': '网络流量 (KB/s)'}, 
                                               [{'title': 'RECV_BYTES', 'valueField': 'rxkB', 'lineColor': '#f58220'},
                                                {'title': 'TRAN_BYTES', 'valueField': 'txkB', 'lineColor': '#00ff00'}]);
                                  }
                       });

                    }
                    
                    var drawIoperf = function() {
                        $.ajax({
                                  dataType: "json",
                                  url: httpPrefix + '/controllers/sls/obtainNcIoperf',
                                  data: 'Category=iostat_log_index&' + params,
                                  success: function(data) {
                                      var chartData = convertDate(data.result.data, "time");
                                       generateChart('Iorwperfchartdiv', chartData, 
                                             {'title': 'io读写 (KB/s)'}, 
                                             [{'title': 'read_iops', 'valueField': 'rkB_s', 'lineColor': '#f58220'},
                                              {'title': 'write_iops', 'valueField': 'wkB_s', 'lineColor': '#00ff00'}]);
                                       
                                       generateChart('Ioutilchartdiv', chartData, 
                                            {'title': 'io利用率 (%)'}, 
                                            [{'title': 'ioutil', 'valueField': 'util', 'lineColor': '#f58220'}]);
                                    }
                        });
                    }
                    
                    // 间隔 一段时间 后发送下一个异步请求， 避免服务端线程竞争导致错误
                    setTimeout(drawCpuperf, 500);
                    setTimeout(drawNetworkperf, 2000);
                    setTimeout(drawIoperf, 3500);
                    drawLoadperf();
                });
                
            }); // $document
            
        </script>
    </head>
    
    <body>
        <div id="zoomUpDiv"></div>
        <div id="perfcharts">
            <div id="Loadperfchartdiv" class="chartdiv"></div>
            <div id="CpuUsageperfchartdiv" class="chartdiv"></div> 
            <div id="Networkflowchartdiv" class="chartdiv"></div> 
            <div id="Iorwperfchartdiv" class="chartdiv"></div> 
            <div id="Ioutilchartdiv" class="chartdiv"></div> 
        </div>
    </body>

</html>

样式文件： chart.css

* {font-family: 微软雅黑, 宋体, san-serif!important}

.chartdiv { 
    float: left; 
    margin: 5px 15px 5px 10px; 
    width: 45%; 
    height: 150px; 
}

#zoomUpDiv { 
    display: none; 
    position: absolute;
    top: 20px;
    left: 10px;
    margin: 10px 15px 10px 10px; 
    width: 95%; 
    height: 80%;
    z-index: 5;
}

highcharts 效果图

转载于:https://www.cnblogs.com/lovesqcc/p/4037728.html

weixin_30498921

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用 amcharts 和 highcharts 绘制多曲线时间趋势图的通用方法

工作中用到，这里分享一下。可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图。当然，对图形没有过多装饰，可以参考 API 文档： highcharts: Highcharts API amcharts: amcharts API 0. 说明 ...
复制链接

扫一扫