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: {
........
}
});
3条答案
按热度按时间rqdpfwrv1#
Plugin Core API提供了一系列钩子,可以用来执行自定义代码。你可以使用afterLayout钩子创建一个linear gradients,并考虑到指定的阈值。然后你必须将它赋给
dataset
的borderColor
属性。请看一下下面的可运行代码,看看它是否能正常工作。
第一个
iszxjhcz2#
要创建具有两个边界(一个上边界和一个下边界)的图形,请执行以下操作:
1.设置阈值
2.创建偏移
3.示例化渐变
4.为每一层选择颜色(从上到下)
1.线的属性坡率
0lvr5msh3#
其他答案有一个小问题,标准化不正确。
这条线
它应该是(最小值-最大值归一化)
修改发光体的代码,现在你可以看到颜色变化正好在25
第一个