如何在chartjs quickchart io中选择图表的上下文或刻度来运行getValueForPixel?

vddsk6oq  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(136)

我正在尝试运行一个函数来创建我的图表上的梯度线,如:
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上选择上下文,任何帮助都会很好。

wixjitnu

wixjitnu1#

出于安全原因,QuickChart的社区版目前无法提供完整的图表上下文。您必须将服务升级到Professionalself-host
但是,有一个内置函数getGradientFillHelper,它 Package 了这种访问的一部分,并可能达到预期的效果。
下面是一个例子:

{
  type: 'line',
  data: {
    labels: [2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
    datasets: [
      {
        data: [12, 6, 5, 18, 12, 20, 50, 80, 90],
        fill: false,
        borderColor: getGradientFillHelper('vertical', [
          '#eb3639',
          '#a336eb',
          '#36a2eb',
        ]),
        borderWidth: 5,
        pointRadius: 0,
      },
    ],
  },
  options: {
    legend: {
      display: false,
    },
  },
}

在Quickchart编辑器中链接到此图表
getGradientFillHelper文档

相关问题