我正在尝试运行一个函数来创建我的图表上的梯度线,如:
y.获取像素值(50),
为此我需要一个特定值的图表像素,但我无法在quickchart上选择它,因为上下文在那里是未定义的。
在前端,我是这样做的:
borderColor: function(context, options) { // context is automatically fetched here from chart
let chart = context.chart;
let {
ctx,
chartArea
} = chart;
if (!chartArea) {
return null;
}
return getGradient(ctx, chartArea, chart);
}
getGradient函数(用于前端):
function getGradient(ctx, chartArea, chart) {
let chartWidth = chartArea.right - chartArea.left;
let chartHeight = chartArea.bottom - chartArea.top;
if (gradient === null || width !== chartWidth || height !== chartHeight) {
width = chartWidth;
height = chartHeight;
let {
scales: {
x,
y
}
} = chart;
gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
gradient.addColorStop(0, 'green');
gradient.addColorStop(y.getPixelForValue(50) / y.getPixelForValue(100), 'yellow')
}
return gradient;
}`;
但是我不知道如何在quickchart io上选择上下文,任何帮助都会很好。
1条答案
按热度按时间wixjitnu1#
出于安全原因,QuickChart的社区版目前无法提供完整的图表上下文。您必须将服务升级到Professional或self-host。
但是,有一个内置函数
getGradientFillHelper
,它 Package 了这种访问的一部分,并可能达到预期的效果。下面是一个例子:
在Quickchart编辑器中链接到此图表
getGradientFillHelper
文档