使用 amcharts 和 highcharts 绘制多曲线图的通用方法

标签: amcharts highcharts 曲线 | 发表时间:2013-10-25 02:50 | 作者:shuqin1984
出处:http://blog.csdn.net


       工作中用到, 这里分享一下。 可以使用 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 格式的灵活性, 采用循环方式加入多个曲线的配置项来实现。


        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轴)
 * 
 */
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  效果图

      

作者:shuqin1984 发表于2013-10-24 18:50:40 原文链接
阅读:167 评论:0 查看评论

相关 [amcharts highcharts 曲线] 推荐:

使用 amcharts 和 highcharts 绘制多曲线图的通用方法

- - CSDN博客Web前端推荐文章
       工作中用到, 这里分享一下. 可以使用 amcharts 和 highcharts 在同一坐标中绘制多个对比曲线图. 当然, 对图形没有过多装饰, 可以参考 API 文档:.       amcharts 与 highcharts 对于数据格式的要求是不一样的.        由于 javascript 所使用的标准数据格式是 JSON, 因此, 可以非常方便地进行数据拼接和组合.

JQuery图表插件——Highcharts

- We_Get - 博客园-首页原创精华区
因为项目中需要用到图表生成,所有Google了下,找到了这个插件,顺带写了个DEMO. 先上三个图,分别是曲线、柱状、扇形. 图表中的数据纯属于DEMO的测试数据,没有实际用意. 第一步,下载并且引用JS包(highcharts.js),theme顾名思义是放皮肤的. 可以下载DEMO逐一试试就知道效果怎么样了,上图就应用了两个样式.

Highcharts:强大的jQuery图表制作功能

- 和谐海洋 - UED TEAM,用户体验设计,web前端开发
Highcharts是一个制作图表的Javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等.  1、提示功能:鼠标移动到图表的某一点上有提示信息. 2、放大功能:选中图表部分放大,近距离观察图表. 3、对个人用户完全免费,这一点很重要的. 4、兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等.

Linux下操纵CPU曲线绘制心形

- TheLover_Z - 博客园-首页原创精华区
不久之前看了「编程之美」,里面有在windows下操纵CPU绘制正弦曲线的示例程序. 思路很简单,但是需要知道几个windows的API函数. 刚开始我想尝试在windows下绘制心形,不过没能做到,原因是CPU曲线是CPU利用率和时间构成的函数的关系,心形是一个封闭图形,不可能是一个函数,所以至少需要两条CPU曲线才能绘制(这需要你的机器为双核或多核或者多个CPU),然而windows的任务管理器,我没能找到将两条CPU曲线绘制在同一图表下的方法,所以没能成功.

阐述休闲游戏设计中的学习曲线

- 沈蚊 - GamerBoom.com 游戏邦
若关于游戏你仅限于体验,那么认为游戏学习方式根植于游戏本身也就情有可原;这不过是根据游戏呈现方式所得出的结论. 作为游戏设计师,你应意识到学习曲线也是需要设计的内容. 游戏学习曲线在新玩家如何认知游戏方面影响很大. 虽然我猜想你应该能够轻松想象学习曲线的样子,但我还是决定绘制一幅,因为在我们把握其精髓前,有些内容还是需要先理清.

炒作和实力:给你的创业公司画个曲线

- SotongDJ - 爱范儿 · Beats of Bits
Jules Maltz 是投资机构 IVP ( Institutional Venture Partners)的合伙人,今天在 TechCrunch 上发表了一篇《别随大流》的文章,其中谈到 2 x 2 思考矩阵和炒作曲线图很有意思. “每当我要面对一笔新投资时,经常会用 2 x 2 的思考矩阵来看待项目.

微软中国发售舒适曲线键盘3000

- SINCERE - Engadget 中国版
微软并不是大家所想像的那样只做"软"的,这次即刻在中国上市了一款新硬件外设:微软舒适曲线键盘3000. 名字有点长,其实就是卖瓜的王婆想多夸下自己产品的特点;和一般键盘不同的反向倾斜、键盘托手和曲线造型,键盘右上方增加了 4 个 Windows 多媒体快捷键,另外还配备了 USB 2.0 接口;要价149元,只是一时半会看到这个歪歪斜斜的键盘不习惯倒没关系,真要操作起来会如何.

我眼中的 性能劣化、优化的曲线

- - 码蜂笔记
随着代码写得越来越烂,程序运行时 数据库操作更多、IO 阻塞等待跟过、不必要的对象创建、GC 回收更频繁,线程的上下文切换也更多,开销越来越多,所有因素综合起来,程序运行更慢,响应延迟加大. 当到达临界点的时候,压垮骆驼的最后一根稻草出现了,系统直接崩溃. 代码的实现一直保持良好,不断通过 合并查询等措施减少数据库操作,通过优化SQL语句缩短了单次数据库操作的时间,通过更好的日志记录方式减少 IO 操作,减少 IO 阻塞等待的时间,进而又可以减少线程切换的次数,通过避免不必要的对象创建,可以提升代码的执行速度,还可以减少 GC 的次数,种种优化效果综合起来的结果就是程序运行稳定,响应时间缩短.

2022 年 Gartner 新兴技术成熟度曲线的新变化

- -
2022 年的新兴技术符合三个主题:不断发展和扩展的. •2022 年 Gartner 新兴技术技术成熟度曲线 包含 25 项“必须知道”的创新,以推动竞争差异化和效率. •只有少数有可能在短短两年内达到被主流采用;许多将需要10年或更长时间. •这些技术处于初期,部署它们的风险更大,但对早期采用者的好处可能更大.

复杂度的指数曲线,以及敏捷原则的根本

- diaoxsh - 透明思考 - Thoughts
想象我正在往一个已有的代码库中添加新的功能. 假如我一次只添加一个小修改,这个小修改是如此简单以至于它只有两种状态——写完代码之后只要看一看,我要么是改对了要么是改错了;如果改错了,我就用另一种方式来修改,后者一定是正确的. 如果我一次不是添加一个小修改,而是添加两个,然后把两个修改放在一起来验证.