我正在应用一个线性渐变到条形图的方式描述的文件成功。https://www.chartjs.org/docs/latest/samples/advanced/linear-gradient.html在这种情况下,我有2个数据集或更多的酒吧类型,每个,我想应用不同的颜色渐变到每个数据集。
我尝试添加第二个函数getGradient2或将颜色作为参数传递,如下所示,但是渲染会忽略第二个颜色,并将第一个渐变应用于所有数据集
let width, height, gradient;
function getGradient(ctx, chartArea, start_color, stop_color) {
const chartWidth = chartArea.right - chartArea.left;
const chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
// Create the gradient because this is either the first render
// or the size of the chart has changed
width = chartWidth;
height = chartHeight;
gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top);
gradient.addColorStop(0, stop_color);
gradient.addColorStop(1, start_color);
}
return gradient;
}
然后实施:
data: data_array[0],
borderRadius: { topLeft: 100, topRight: 100, bottomRight: 100, bottomLeft: 100 },
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) { return null; }
return getGradient2(ctx, chartArea, "rgba(182, 86, 235, 1)", "rgba(182, 86, 235, 0.66)");
}, barPercentage: 1.0, categoryPercentage: 1.0,
barThickness: 10, maxBarThickness: 10, yAxisID: yAxisID, borderWidth: 0, type: 'bar'
对于第二个数据集:
data: data_array[1],
borderRadius: { topLeft: 100, topRight: 100, bottomRight: 100, bottomLeft: 100 },
backgroundColor: function(context) {
const chart = context.chart;
const {ctx, chartArea} = chart;
if (!chartArea) { return null; }
return getGradient2(ctx, chartArea, "rgba(244, 102, 235, 1)", "rgba(244, 102, 235, 0.66)");
}, barPercentage: 1.0, categoryPercentage: 1.0,
barThickness: 10, maxBarThickness: 10, yAxisID: yAxisID, borderWidth: 0, type: 'bar'
对我来说似乎是一个bug,但他们说要在GitHub上发布SO,所以如果你找到让它工作的方法,请告诉我:)
1条答案
按热度按时间f4t66c6m1#
您需要在函数中定义
let width, height, gradient;
这一行,以便它绑定到函数,并且不会被覆盖,这样它就可以正常工作:第一个