Javascript 如何根据值更改点/线？

因此，我想显示一个折线图，当值低于30或高于200时，它会变成红色，对于介于两者之间的值，它会变成灰色。我很难让它改变颜色。它只是以灰色显示图表上的点，我是chart.js的新手，所以任何建议都是有用的！我不知道为什么，但更新图表似乎没有更新

数据：{
标签：['7/31/2018'，'11/7/2018'，'2/11/2019'，'4/3/2019'，'5/11/2019'，'7/18/2019'，'extra'，'extra']，
数据集：[{
标签：'收缩'，
背景色：“rgba（0,0,0,0）”，
边框颜色：“rgba（0,0,0,1）”，
pointBackgroundColor:'灰色'，
点半径：“3”，
pointHoverRadius:'3'，
pointHoverBackgroundColor:'白色'，
边框宽度：“1”，
数据：[1171359010010611029300]
}
},
//配置选项在这里
选项：{
回答：是的，
MaintaintAspectRatio:false，
图例：{
显示：假
},
比例：{
xAxes：[{
网格线：{
显示：假，
抽边线：假，
},
滴答声：{
显示：假，
}
}],
雅克斯：[{
网格线：{
显示：假，
抽边线：假，
},
滴答声：{
显示：假，
建议民:50,，
阶跃值：50，
建议最大值：150
}
}]
},
布局：{
填充：{
左:0,，
右:10,，
前10名，
底部：0
}
},
工具提示：{
显示颜色：假，
caretSize:5，
车身尺寸：11，
回调：{
标题：函数（）{}，
标签：函数（工具提示项、数据）{
返回data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index]+'mmHg'+''+data.labels[tooltipItem.index]；
},
},
}
});
对于（i=0；i<12；i++）{
变量颜色='绿色'；
if（数据集[0]。数据[i]。值<30）{
颜色=红色；
}else if（数据集[0]。数据[i]。值>130）{
颜色=红色；
}否则{
颜色=灰色；
}
data.datasets[0]。数据[i]。BackgroundColor=color；
data.datasets[0]。数据[i]。pointBackgroundColor=color；
}
myObjBar.update（）；

我强烈推荐（因为Bands插件只允许每张图表使用一个波段，fork允许使用两个波段）

易于处理，比自己写东西容易得多，因为没有chartjs内置函数。该插件完全适合您的用例

在JSBin中，您可以看到插件及其分支的两种解决方案。因为我无法或不可能导入分支，您可以看到代码，但如果没有导入，它将不工作。如果调整注释，插件代码将工作

下面是fork的代码：

options: {
  bands: {
    yValueMin: 35,
    yValueMax: 55,
    belowMinThresholdColour: [
      'rgb(255, 100, 100)'
    ],
    aboveMaxThresholdColour: [
      'rgb(255, 100, 100)'
    ]
  }
}

---

我尝试过使用它，但它没有出现在@HeadhunterKev的图表上，我想我在实现它时遇到了问题，我试图按照文档进行操作，但我认为它的设置不正确