如何根据值更改点/线？

Question

因此，我想显示一个折线图，当值小于30或大于200时变为红色，而介于两者之间的值为灰色。我无法更改颜色。它只是以灰色显示图表上的所有点，我是chart.js的新手，所以任何建议都对您有帮助！我不确定为什么，但是更新图表似乎没有更新。

data: {
  labels: ['7/31/2018', '11/7/2018', '2/11/2019', '4/3/2019', '5/11/2019', '7/18/2019', 'extra', 'extra'],
  datasets: [{
      label: 'Systolic',
      backgroundColor: 'rgba(0, 0, 0, 0)',
      borderColor: 'rgba(0,0,0,1)',
      pointBackgroundColor: 'grey',
      pointRadius: '3',
      pointHoverRadius: '3',
      pointHoverBackgroundColor: 'white',
      borderWidth: '1',
      data: [117, 135, 90, 100, 106, 110, 29, 300]
    }
  },

  // Configuration options go here
  options: {
    responsive: true,
    maintainAspectRatio: false,
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
        gridLines: {
          display: false,
          drawBorder: false,
        },
        ticks: {
          display: false,
        }
      }],
      yAxes: [{
        gridLines: {
          display: false,
          drawBorder: false,

        },
        ticks: {
          display: false,
          suggestedMin: 50,
          stepValue: 50,
          suggestedMax: 150
        }
      }]
    },
    layout: {
      padding: {
        left: 0,
        right: 10,
        top: 10,
        bottom: 0
      }
    },
    tooltips: {
      displayColors: false,
      caretSize: 5,
      bodyFontSize: 11,
      callbacks: {
        title: function() {},

        label: function(tooltipItem, data) {
          return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + 'mmHg' + ' ' + data.labels[tooltipItem.index];

        },

      },
    }
  });

for (i = 0; i < 12; i++) {
  var color = 'green';
  if (datasets[0].data[i].value < 30) {
    color = 'red';
  } else if (datasets[0].data[i].value > 130) {
    color = 'red';
  } else {
    color = 'grey';
  }

  data.datasets[0].data[i].BackgroundColor = color;
  data.datasets[0].data[i].pointBackgroundColor = color;
}

myObjBar.update();

Answer 1

我强烈推荐this fork中的Bands plugin（因为Bands插件每个图表只允许一个带，fork允许两个带）。

易于处理，比自己编写东西容易得多，因为没有为此提供的chartjs-build-in-function。该插件完全适合您的用例。

https://jsbin.com/yikayukewu/edit?html,js,output

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

这是叉子的代码：

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