您的示例可以通过使用名为ZingChart的替代图表库来实现.您可以使用图表类型" 范围 "和规则功能根据特定值范围设置最小和最大颜色区域.水平的红色和蓝色线可以通过使用scale-x标记来实现.
请参阅下面的示例,了解如何利用ZingChart实现您的目标.我是ZingChart团队的成员,如果您需要任何进一步的帮助,请随时与我们联系.
var myConfig = {
type:"range",
backgroundColor : "white",
scaleX:{
maxItems:8,
zooming:1,
},
scaleY:{
minValue:"auto",
markers : [
{
type : "line",
range : [70],
lineColor : "red"
},
{
type : "line",
range : [30],
lineColor : "blue"
}
]
},
"series":[
{
lineWidth:2,
lineColor:"#8100a4",
marker:{
type:"none"
},
values : [[60,60],[70,70],[78,70],[75,70],[70,70],[50,50],[60,60],[60,60],[60,60],[34,34],[35,35],[35,35],[35,35],[30,30],[24,30],[26,30],[25,30],[28,30],[30,30],[32,32]],
backgroundColor:"#1049c4",
rules:[
{
rule:"%node-max-value < %node-min-value",
backgroundColor:"#c00"
}
],
minLine:{
lineColor:"#8100a4",
},
maxLine:{
lineColor:"#8100a4"
}
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: 500
});<html>
<head>
<script src= "https://cdn.zingchart.com/2.1.4/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/2.1.4/modules/";</script></head>
<body>
<div id='myChart'></div>
</body>
</html>