双轴条形图中的 Javascript 条

Question

任何人都可以推荐一个好的来源来创建如下图 -

这个图表实际上来自 Excel，但我想在使用 javascript 的网络项目中使用它。

希望有人可以就来源提供建议？

Answer 1

这在 ZingChart 中很容易实现。这是我根据您的图片制作的演示。向下滚动并运行代码片段以查看现场演示。

免责声明* 我是 ZingChart 团队的一员。有问题请评论!

var myConfig = {
  theme:"none",
 	type: "bar", 
 	scaleY:{
 	  values: "0:120:20"
 	},
 	plot:{
 	  shadow:false,
 	  barsOverlap:"100%"
 	},
 	scaleY2:{
		  values:"0:700:100",
		  guide:{
		    visible:false
		  }
	},
	scaleX:{
    guide:{
      visible:false
    }
  },
	series : [
		{
			values : [89,108,46,31,8,8,5,1],
		  barWidth:"80%",
		  backgroundColor:"#C0504D",
		  valueBox:{
		    color:"black"
		  },
			hoverState:{
		    visible:false
		  }
		},
		{
		  values: [410,115,108,115,615,105,250,90],
		  barWidth:"20%",
		  scales:"scale-x,scale-y-2",
		  backgroundColor:"#9BBB59",
		  hoverState:{
		    visible:false
		  }
		},
	]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart"></div>