其实做了这么久的highcharts,感觉上手并不太难,难点在于实际应用中,如何动态地拼装出数据结构才是最关键的。最近做了一个混合图,包含两个Y轴,还涉及到对后台数据的结合。
首先,画一个空的“架子”:
Highcharts.setOptions(dark_comm); $("#chart").highcharts({ chart : { margin:[50,0,35,60], renderTo: 'avgTime', type: 'spline', marginRight: 10 }, title : { text : '失败率、笔数走势图', style : { color:'#FFFFFF' }, align :"center", /* marginTop :10*/ }, xAxis : { type : 'datetime', tickPixelInterval : 150 }, yAxis : [{ // allowDecimals : false, title : '失败率', /* plotLines : [{ value : 0, }],*/ labels:{ format: '{value}%', }, max:100, tickInterval:25, min: 0 },{ // allowDecimals : false, title : '笔数', /*plotLines : [{ value : 0, width : 1 }],*/ min : 0, opposite: true }], tooltip : { xDateFormat: '%Y-%m-%d %H:%M', shared:true }, legend : { align: 'right', verticalAlign: 'top', borderWidth: 0, y:10, enabled : true }, exporting : { enabled : false }, marker: { enabled: false }, series : create() });
这里,需要在一个图上同时画出2个指标:失败率和笔数。可以看出,series是由函数动态生成的。其实参照官网上混合图的例子并不难,但这里是由create()函数动态生成的,涉及到一些highcharts语法
和一点需要注意的小问题,如下:
$.ajax({ type: "POST", dataType:"json", data:dataParam, async: false, //表示同步,如果要得到ajax处理完后台数据后的返回值,最好这样设置 url: url,//相对路径 success: function(data){ var ratioList = data.ratioList; var countList = data.countList; //填充series var $chart1 = $("#chart").highcharts(); var series1 = $chart1.series; while(series1.length > 0) { series1[0].remove(false); series1[0].remove(false); } $chart1.addSeries({ name : '失败率', turboThreshold:1500, yAxis:0, color:"#79E570", marker: { enabled: false }, data : ratioList }); $chart1.addSeries({ name : '笔数', turboThreshold:1500, color:"#3CB034", yAxis:1, type: 'area', marker: { enabled: false }, data : countList }); } });
这里值得注意的几个点:
1)while(series1.length > 0) {
series1[0].remove(false);
series1[0].remove(false);
}
这段代码最好加上,可能首次渲染不会走这段代码,因为series:[],但考虑到代码的健壮性,如果条件改变,需要重新加载数据(架子还在那),是需要把之前的series中的数据给clear掉的。
为啥while里第二行不是series[1].remove()?因为你第一行series1[0].remove(false)之后,此时原来的series1数组只剩一个元素了,所以你第二行用series[1]的话会引起数组下标越界,表现在
js上就是undefined异常。
2)在这种混合图的数据填充时,$chart1.addSeries的操作必须注意先后顺序,本例中第二个addSeries的操作在后,并且其yAxis指定为1,表明对应第二个Y轴。做的过程中发现,如果你把第二个
addSeries的操作顺序放在前面,即使你指定了其yAxis为1,渲染的时候series数组的元素顺序还是由addSeries的顺序决定的。
3)每个series单元可以分别指定其type。
效果示范:
相关推荐
折线、双Y轴、不交叉、highcharts、按照日期分割线 折线、双Y轴、不交叉、highcharts、按照日期分割线
highcharts导出图片的后台代码,这样就不用从highcharts官网服务器上进行图片导出了,成了一个本地的服务器!
highcharts 动态指定 x y数据
highcharts的常用配置,后台数据的交互。数据的下钻,已经导出相关配置,返回按钮配置。堆叠图,加折线图,展示环比增量。包含内容丰富,
highCharts 示例 demo highCharts入门 highCharts 自己 按照API文档 写的 几个小例子 另一篇 是一个 fusioncharts 的例子 需要...另外 怎么用highcharts 和 fusioncharts 画 雷达图 ,仪表图 ,会的 朋友 ,赐教一下!
Highcharts在Java后台导出图片到PDF和EXCEL文件中示例代码,程序放到MyEclipse8.6中编译后可直接放到Tomcat6及以上版本运行,程序中含有jar包,下载后不用操心到处找jar包,在MyEclipse8.6里建立普通的Web工程就可以...
Highcharts提供的Geojson世界地图数据集的国家名称中文翻译,Vue使用Highcharts实现世界地图的详细介绍来自我的另一篇文章,可供参考,有问题可随时联系,感谢支持: ...
Highcharts 导出图片,具体的图片导出的代码,带吗代码代码代码
Highcharts AJAX后台JAVA JSON 曲线报表完美可运行例子 不包含官方JS 自己下载
Highcharts 支持的图表类型有直线图、曲线图、区域图、柱状图、饼状图、散状点图、仪表图、气泡图、瀑布流图等多达 20 种图表,其中很多图表可以集成在同一个图形中形成混合图。 兼容性 Highcharts 可以在所有的...
下面小编就为大家带来一篇Highcharts 多个Y轴动态刷新数据的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...
java实现的highcharts与ajax结合动态实时获取数据更新图表
highcharts 与 struts2 完美整合,解决部分新手对于操作highcharts的误区,本例子无需连接数据库,在strust2 Action中创建模拟数据,以json的方式返回到前台js,highcharts通过解析json,进而完成数据的装配,且可以...
Highcharts柱状图显示,柱状图显示颜色不一样
HighCharts 图表属性——chart HighCharts 颜色属性——colors HighCharts 版权属性——credits HighCharts 去除版权的几种方法 HighCharts 导出属性——explorting HighCharts HTML标签——labels HighCharts 语言...
所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调。 下面一起来学习学习Highcharts的...
android 调用highcharts.js 实现折线图展示
HighCharts导出图片是发现请求的是官网,于是找了一下,整理了这个导出请求本地服务导出png、jpg、svg和pdf的demo (GitHub里找的 https://github.com/imclem/Highcharts-export-module-asp.net 把里面用到的 (sharp...