这是否有可能在y> 50＆y <0时在js中更改线形图的点对点颜色。 [关闭]

Question

关闭。这个问题需要details or clarity。它当前不接受答案。

---

是否要改善此问题？通过editing this post添加详细信息并澄清问题。

关闭昨天。

我试图在Chartjs行中的'y> 40'和'y <0'时应用不同的颜色。enter image description here

Answer 1

您可以创建一个scatter图表，并使用Plugin Core API直接在画布上绘制线条。 API提供了一系列可用于执行自定义代码的挂钩。

在下面的代码片段中，我使用afterDraw钩子在数据点之间绘制连接线。其颜色取决于开始和结束数据点的值。

const data = [
  { x: 1, y: -10 },
  { x: 2, y: 0 },
  { x: 3, y: 10 },
  { x: 4, y: 20 },
  { x: 5, y: 30 },
  { x: 6, y: 25 },
  { x: 7, y: 40 },
  { x: 8, y: 50 },
  { x: 9, y: 60 }
];

new Chart(document.getElementById("myChart"), {
  type: "scatter",
  plugins: [{
    afterDraw: chart => {      
      var ctx = chart.chart.ctx; 
      var xAxis = chart.scales['x-axis-1'];
      var yAxis = chart.scales['y-axis-1'];      
      chart.config.data.datasets[0].data.forEach((value, index) => {
        if (index > 0) {        
           var prevValue = data[index - 1];
           var xFrom = xAxis.getPixelForValue(prevValue.x);     
           var yFrom = yAxis.getPixelForValue(prevValue.y);     
           var xTo = xAxis.getPixelForValue(value.x);         
           var yTo = yAxis.getPixelForValue(value.y); 
           ctx.save();           
                      
           if (prevValue.y <= 0 && value.y <= 0) {
              ctx.strokeStyle = 'red';           
           } else if (prevValue.y >= 40 && value.y >= 40) {
             ctx.strokeStyle = 'green';     
           } else {
             ctx.strokeStyle = 'blue';     
           }
           ctx.lineWidth = 2;
           ctx.beginPath();
           ctx.moveTo(xFrom, yFrom);             
           ctx.lineTo(xTo, yTo);
           ctx.stroke();
           ctx.restore();
        }
      });      
    }
  }],
  data: {
    datasets: [{
      label: "#Temperature",
      data: data,
      borderColor: "blue"
    }]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script>
<canvas id="myChart" height="90"></canvas>