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

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

我在过去的项目中使用过谷歌图表，搜索了通过谷歌找到的各种库的文档（chart.js、c3.js、nvd3.js…），但它们似乎都不支持。所以我想知道是否有人有建议。

该库可以处理您试图通过标签和标记实现的内容。可以围绕特定范围的值点设置区域或线标记，并为该标记设置样式。标签（用于A、B、C标签）放置在x/y坐标比例上，可以相应地修改

我是ZingChart团队的一员，我非常乐意帮助解决任何进一步的问题

var myConfig={
键入：“行”，
标签：[
{
x:“15%”，
y：“15%”，
尺码：18，
案文：“区域”
},
{
x:“15%”，
y：“25%”，
尺码：18，
案文：“A”
},
{
x:“15%”，
y:“34%”，
尺码：18，
案文：“B”
},
{
x:“15%”，
y:“42%”，
尺码：18，
案文：“C”
},
{
x:“15%”，
y：“50%”，
尺码：18，
案文：“C”
},
{
x:“15%”，
y:“59%”，
尺码：18，
案文：“B”
},
{
x:“15%”，
y:“68%”，
尺码：18，
案文：“A”
},
],
斯卡利：{
值：“-100:100:10”，
标记：[
{
键入：“行”，
范围：[75]，
线宽：2，
线条样式：“虚线”，
线条颜色：“ff2424”
},
{
类型：'区域'，
范围：[50,75]，
阿尔法：0.6，
背景颜色：“ff7171”
},
{
类型：'区域'，
范围：[25,50]，
阿尔法：0.6，
背景颜色：“fdff71”
},
{
类型：'区域'，
范围：[0,25]，
阿尔法：0.6，
背景色：“98ff71”
},
{
键入：“行”，
范围：[0]，
线宽：2，
线条样式：“虚线”，
线条颜色：“006dff”
},
{
类型：'区域'，
范围：[0，-25]，
阿尔法：0.6，
背景色：“98ff71”
},
{
类型：'区域'，
范围：[-25，-50]，
阿尔法：0.6，
背景颜色：“fdff71”
},
{
类型：'区域'，
范围：[-50，-75]，
阿尔法：0.6，
背景颜色：“ff7171”
},
{
键入：“行”，
范围：[-75]，
线宽：2，
线条样式：“虚线”，
线条颜色：“ff2424”
}
]
},
系列：[
{
值：[2,4,4,25,36,14,23,23,24,25,16,8]，
}
]
};
zingchart.render（{
id:'我的图表'，
资料来源：myConfig，
身高：400，
宽度：600
});

您查看了Highcharts吗？还没有查看Highcharts，现在查看一下，我实际上刚刚回到这个选项卡，因为我发现一个非常接近的选项卡，它允许指定Y轴上各个线条的颜色，这可能已经足够了