chart.js - 如何在chartjs quickchart io中选择图表上的上下文或比例来运行getValueForPixel？

Question

我正在尝试运行一个函数来在我的图表上创建渐变线，例如：

y.getValueForPixel(50),

为此，我需要某个值的图表像素，但我不知道在快速图表上选择它，因为那里没有定义上下文。

在前端，我这样做是这样的：

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 上选择上下文，任何帮助都会很棒。

标签： chart.js

Answer 1

出于安全原因，目前在 QuickChart 的社区版本中不提供完整的图表上下文。您必须升级到专业版或自行托管该服务。