带双轴的条形图中的Javascript栏

Question

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

此图表实际上来自Excel，但我想在使用javascript的web项目中使用它。

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

Answer 1

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

免责声明*我是ZingChart团队的成员。如果您有疑问，请评论！

＆＃13;

＆＃13;

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 
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;