将线色颜色更改低于图表中的特定值。

Question

我正在尝试为特定值以下的一定颜色上下颜色。我正在使用Chart.js v3.7.1

href =“ https://stackoverflow.com/a/69691397/1725871”中找到的解决方案

我已经实现了在< a href =“ https://i.sstatic.net/rka48.png” rel =“ nofollow noreferrer”>

 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  */
            }

我知道我可以做到非常简单地填充，但反式区域的可见影响图表不是我正在寻找的视觉效果。

我正在寻找这个答案，但是我无法完成两行（我对工作不够熟悉） 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

此答案很容易适应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

我做出了详细的响应这里这可以为您提供帮助。

这是代码：

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: {
    ........
   }
});