麻豆网站在线播放,午夜成人在线播放,91国产精品

amCharts和Highcharts繪制多曲線圖教程

轉帖|使用教程|編輯：龔雪|2014-08-14 09:58:49.000|閱讀 6604 次

概述：本文為使用amcharts和highcharts繪制多曲線圖教程，對amcharts和highcharts的數據格式、HTML、DIV以及繪制方法進行了詳細講解，并附有代碼和效果圖，幫助朋友們進一步學習使用amcharts和highcharts。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

我們可以可以使用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 格式的靈活性，采用循環方式加入多個曲線的配置項來實現。

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 繪制:

需要導入

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

4. 使用 highcharts 繪制:

需要導入:

drawchart_highcharts.js 是基于 highcharts 的在同一坐標中繪制多個圖形的客戶端接口。

/** * 使用 highcharts 繪制時間趨勢曲線圖 * * generateChart: * chartDiv 繪圖所需要的 DIV 區域名稱; * chartData 繪圖所需要的數據 * chartConfig 繪圖的全局配置對象 * lineConfigArray 每個曲線圖的配置對象(配置Y軸) * */ function generateChart(chartDiv, chartData, chartConfig, lineConfigArray) { var chartObj = { chart: { zoomType: 'x' }, plotOptions: { series: { marker: { enabled: false, states: { hover: { enabled: true } } } } }, series: [], xAxis: { type: 'datetime', dateTimeLabelFormats: { hour: '%b-%e %H:%M' } }, yAxis: { title: { text: '' } }, tooltip: {//當鼠標懸置數據點時的提示框 formatter: function() { //格式化提示信息 return Highcharts.dateFormat('%H:%M', this.x) +'<br/>'+ this.y; } }, 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); } $("#"+chartDiv).highcharts(chartObj); } 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; } /** * 從 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; }

客戶端使用：

$(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'}]); } }); } }

highcharts 效果圖