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

工作中用到，这里分享一下。可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图。当然，对图形没有过多装饰，可以参考 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 效果图：

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

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 效果图

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

秒客网

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

相关文章