Highcharts混合图（2个Y轴）——结合后台数据

原创

于 2017-04-06 16:09:12 发布 · 3k 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用Highcharts创建一个包含两个Y轴的混合图，并结合后台数据进行展示。重点在于动态生成数据结构以及处理高charts语法和注意事项。文章提到了在清除已有系列、添加新系列的顺序以及指定Y轴等方面的关键点，帮助读者理解在实际应用中如何正确操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

其实做了这么久的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             : {

最低0.47元/天解锁文章

200万优质内容无限畅学