Question

我一直在寻找一个折线图库，它允许您遮蔽y轴的一个或多个部分，以显示绘制值的可接受范围。类似于this

的东西

我在过去的项目中使用了Google Charts＆amp;搜索了通过Google找到的各种库的文档（chart.js，c3.js，nvd3.js ...），但似乎没有人支持它。所以我想知道是否有人有推荐。

Answer 1

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

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

＆＃13;

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

＆＃13;

<!DOCTYPE html>
<html>
	<head>
		<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
	<body>
		<div id='myChart'></div>
	</body>
</html>

＆＃13;

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

1 个答案: