JS图表库,允许部分着色y轴

我一直在寻找一个折线图库,它允许你遮蔽y轴的一个或多个部分,以显示绘制值的可接受范围.同样的事情也来此

我在过去的项目中使用了谷歌图表,并搜索了通过谷歌找到的各种库的文档(chart.js,c3.js,nvd3.js ......),但似乎没有人支持它.所以我想知道是否有人有推荐.

Zingchart图书馆可以通过标签和标记来处理您想要实现的目标.您可以围绕特定范围的值点设置区域或线标记,并将样式设置为该标记.标签(用于A,B,C标签)放置在x/y坐标刻度上,可以相应地进行修改.

我是ZingChart团队的成员,非常乐意为任何进一步的问题提供帮助.

var myConfig = {
 	type: "line", 
 	labels : [
 	  {
 	    x : "15%",
 	    y : "15%",
 	    fontSize : 18,
 	    text : "ZONE"
 	  },
 	  {
 	    x : "15%",
 	    y : "25%",
 	    fontSize : 18,
 	    text : "A"
 	  },
      {
 	    x : "15%",
 	    y : "34%",
 	    fontSize : 18,
 	    text : "B"
 	  },
 	  {
 	    x : "15%",
 	    y : "42%",
 	    fontSize : 18,
 	    text : "C"
 	  },
 	  {
 	    x : "15%",
 	    y : "50%",
 	    fontSize : 18,
 	    text : "C"
 	  },
      {
 	    x : "15%",
 	    y : "59%",
 	    fontSize : 18,
 	    text : "B"
 	  },
      {
 	    x : "15%",
 	    y : "68%",
 	    fontSize : 18,
 	    text : "A"
 	  },
 	],
 	scaleY : {
 	  values : "-100:100:10",
 	  markers : [
 	    {
 	      type : 'line',
 	      range : [75],
 	      lineWidth : 2,
 	      lineStyle : "dotted",
 	      lineColor : "#ff2424"
 	    },
 	    {
 	      type : 'area',
 	      range : [50,75],
 	      alpha : 0.6,
 	      backgroundColor : "#ff7171"
 	    },
 	    {
 	      type : 'area',
 	      range : [25,50],
 	      alpha : 0.6,
 	      backgroundColor : "#fdff71"
 	    },
 	    {
 	      type : 'area',
 	      range : [0,25],
 	      alpha : 0.6,
 	      backgroundColor : "#98ff71"
 	    },
 	    {
 	      type : 'line',
 	      range : [0],
 	      lineWidth : 2,
 	      lineStyle : "dotted",
 	      lineColor : "#006dff"
 	    },
 	    {
 	      type : 'area',
 	      range : [0,-25],
 	      alpha : 0.6,
 	      backgroundColor : "#98ff71"
 	    },
 	    {
 	      type : 'area',
 	      range : [-25,-50],
 	      alpha : 0.6,
 	      backgroundColor : "#fdff71"
 	    },
 	    {
 	      type : 'area',
 	      range : [-50,-75],
 	      alpha : 0.6,
 	      backgroundColor : "#ff7171"
 	    },
 	    {
 	      type : 'line',
 	      range : [-75],
 	      lineWidth : 2,
 	      lineStyle : "dotted",
 	      lineColor : "#ff2424"
 	    }
 	  ]
 	},
 	
	series : [
		{
			values : [2,4,4,25,36,14,23,23,24,25,16,8],
		}
	]
};
 
zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});