时间戳

首页 > 解决方案 > 如何根据值更改点/线？

javascript - 如何根据值更改点/线？

问题描述

所以我想显示一个折线图，当值低于 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();

标签： javascriptnode.jschart.js

解决方案

我强烈推荐Bands 插件的这个分支（因为 Bands 插件每个图表只允许一个波段，而分支允许两个）。

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

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

在 JSBin 中，您可以看到插件及其 fork 的两种解决方案。因为我无法或无法导入 fork，所以您可以看到代码，但如果没有导入，它就无法工作。如果您调整评论，插件代码就可以工作。

这是fork的代码：

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

推荐阅读