当Chart.js线条绘制在任意值之上/之下时,如何更改线条的颜色?

vbkedwbf  于 2022-11-06  发布在  Chart.js
关注(0)|答案(3)|浏览(171)

请注意,当蓝线下降到任意值以下时,蓝线将变为红色。

P.S.这张截图 * 是 * Chart.js图表,但我没有访问源代码的权限。

rqdpfwrv

rqdpfwrv1#

Plugin Core API提供了一系列钩子,可以用来执行自定义代码。你可以使用afterLayout钩子创建一个linear gradients,并考虑到指定的阈值。然后你必须将它赋给datasetborderColor属性。
请看一下下面的可运行代码,看看它是否能正常工作。
第一个

iszxjhcz

iszxjhcz2#

要创建具有两个边界(一个上边界和一个下边界)的图形,请执行以下操作:

1.设置阈值

let yThresholdMax = yAxis.getPixelForValue(YOUR_MAX_THRESHOLD);  
let yThresholdMin = yAxis.getPixelForValue(YOUR_MIN_THRESHOLD);

2.创建偏移

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

3.示例化渐变

let gradient = ctx.createLinearGradient(0, yAxis.top, 0, yAxis.bottom);

4.为每一层选择颜色(从上到下)

//colour of the highest value of the chart
gradient.addColorStop(0, 'red');

//colour at the upper limit 
gradient.addColorStop(offsetMax, 'darkred'); 

//colour from the upper limit to the lower limit
gradient.addColorStop(offsetMax, 'blue'); 
gradient.addColorStop(offsetMin, 'blue');

//colour at the lower limit 
gradient.addColorStop(offsetMin,'darkred');
//colour at the lowest value of the chart
gradient.addColorStop(1,"red");

1.线的属性坡率

chart.data.datasets[0].borderColor = gradient;
  • 完整代码:*
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: {
    ........
   }
});
0lvr5msh

0lvr5msh3#

其他答案有一个小问题,标准化不正确
这条线

let offset = 1 / yAxis.bottom * yThreshold;

它应该是(最小值-最大值归一化)

let offset = (yThreshold - yAxis.top) / (yAxis.bottom - yAxis.top);

修改发光体的代码,现在你可以看到颜色变化正好在25
第一个

相关问题