在 Chart.js 中将线条颜色更改为低于特定值

Question

我正在尝试将特定值以下的线着色为某种颜色。我正在使用 Chart.js v3.7.1

我已经部分成功地实施了this answer 中的解决方案...

 let posColour= 'rgb(86,188,77)';
 let negColour= 'rgb(229,66,66)';
 let config = {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: tempData.sensorName,
                        data: data,
                        backgroundColor: 'rgba(60,141,188,0.9)',
                        borderColor: posColour,
                        pointRadius: false,
                        pointColor: '#3b8bba',
                        pointStrokeColor: posColour,
                        pointHighlightFill: '#fff',
                        pointHighlightStroke: posColour,
                        segment: {
                            borderColor: (ctx2) => (ctx2.chart.data.datasets[0].data[ctx2.p0DataIndex] < 40 ? negColour : posColour)
                        }

                    }]
                }
                 /*  items below here are not necessary to reproduce the issue  */
                 ,
                options: {
                    reponsive: true,
                    scales: {
                        x: {
                            type: 'time',
                            time: {
                                displayFormats: timeFormat,
                                format: 'day'
                            },
                            ticks: {
                                major: {
                                    enabled: true
                                },
                                maxTicksLimit: 15
                            },
                            title: {
                                display: true,
                                text: 'Date'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Temp (\u00b0C)'
                            }
                        }
                    }
                }
                 /*  items above here are not necessary to reproduce the issue  */
            }

我知道我可以做到非常simply with a fill，但是倒置面积图的可见影响并不是我想要的视觉效果。

我正在寻找类似this answer 的东西，但我无法让最后两行工作（我对 ChartJS 不够熟悉）。

let posColour= 'rgb(86,188,77)';
let negColour= 'rgb(229,66,66)';

plugins: [{
  beforeRender: (x, options) => {
    const c = x.chartArea; //tweaked for chart.js3 
    const dataset = x.data.datasets[0];
    const yScale = x.scales.y; //tweaked for chart.js3
    const yPos = yScale.getPixelForValue(40); //I want everything under 40 red, not 0 as the original answer...

    const gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
    gradientFill.addColorStop(0, posColour);
    gradientFill.addColorStop(yPos / c.height, posColour);
    gradientFill.addColorStop(yPos / c.height, negColour);
    gradientFill.addColorStop(1, negColour);

    //these two lines are the ones i can't figure out how to convert to chart.js3...
    const model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
    model.borderColor = gradientFill;
  },
}];

Answer 1

answer 提供的解决方案可以轻松适应 Chart.js v3.7.1。

请看下面的可运行代码，看看它是如何工作的。

const threshold = 25;

new Chart('myChart', {
  type: 'line',
  plugins: [{
    afterLayout: chart => {
      let ctx = chart.ctx;
      ctx.save();
      let yAxis = chart.scales.y;
      let yThreshold = yAxis.getPixelForValue(threshold);
      let gradient = ctx.createLinearGradient(0, yAxis.top, 0, yAxis.bottom);
      gradient.addColorStop(0, 'green');
      let offset = 1 / yAxis.bottom * yThreshold;
      gradient.addColorStop(offset, 'green');
      gradient.addColorStop(offset, 'red');
      gradient.addColorStop(1, 'red');
      chart.data.datasets[0].borderColor = gradient;
      ctx.restore();
    }
  }],
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
    datasets: [{
      label: 'My Dataset',
      data: [32, 44, 29, 33, 18, 15, 30],
      fill: false,
      lineTension: 0.2
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" height="80"></canvas>

Answer 2

我已经做了详细的回复here可以帮到你。

代码如下：

var myLineChart = new Chart(ctx, {
  type: 'line',
  plugins: [{
    afterLayout: chart => {
      let ctx = chart.chart.ctx;
      ctx.save();
      let yAxis = chart.scales["y-axis-0"];
      let yThresholdMax = yAxis.getPixelForValue(data.limits.max);  
      let yThresholdMin = yAxis.getPixelForValue(data.limits.min);  

      let offsetMax = 1 / yAxis.bottom * yThresholdMax; 
      let offsetMin= 1 / yAxis.bottom * yThresholdMin; 

      let gradient = ctx.createLinearGradient(0, yAxis.top, 0, yAxis.bottom);   
      
      gradient.addColorStop(0, 'red'); 
      gradient.addColorStop(offsetMax, 'darkred'); 
      gradient.addColorStop(offsetMax, 'blue'); 
      gradient.addColorStop(offsetMin, 'blue');
      gradient.addColorStop(offsetMin,'darkred');
      gradient.addColorStop(1,"red");           
      chart.data.datasets[0].borderColor = gradient;    
      ctx.restore();
    }
  }],
  // The data for our dataset
  data: {
      ......
  },
    options: {
    ........
   }
});