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

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

我正在尝试运行一个函数来创建我的图表上的梯度线,如:
y.获取像素值(50),
为此我需要一个特定值的图表像素,但我无法在quickchart上选择它,因为上下文在那里是未定义的。
在前端,我是这样做的:

  1. borderColor: function(context, options) { // context is automatically fetched here from chart
  2. let chart = context.chart;
  3. let {
  4. ctx,
  5. chartArea
  6. } = chart;
  7. if (!chartArea) {
  8. return null;
  9. }
  10. return getGradient(ctx, chartArea, chart);
  11. }

getGradient函数(用于前端):

  1. function getGradient(ctx, chartArea, chart) {
  2. let chartWidth = chartArea.right - chartArea.left;
  3. let chartHeight = chartArea.bottom - chartArea.top;
  4. if (gradient === null || width !== chartWidth || height !== chartHeight) {
  5. width = chartWidth;
  6. height = chartHeight;
  7. let {
  8. scales: {
  9. x,
  10. y
  11. }
  12. } = chart;
  13. gradient = ctx.createLinearGradient(0, chartArea.top, 0, chartArea.bottom);
  14. gradient.addColorStop(0, 'green');
  15. gradient.addColorStop(y.getPixelForValue(50) / y.getPixelForValue(100), 'yellow')
  16. }
  17. return gradient;
  18. }`;

但是我不知道如何在quickchart io上选择上下文,任何帮助都会很好。

wixjitnu

wixjitnu1#

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

  1. {
  2. type: 'line',
  3. data: {
  4. labels: [2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020],
  5. datasets: [
  6. {
  7. data: [12, 6, 5, 18, 12, 20, 50, 80, 90],
  8. fill: false,
  9. borderColor: getGradientFillHelper('vertical', [
  10. '#eb3639',
  11. '#a336eb',
  12. '#36a2eb',
  13. ]),
  14. borderWidth: 5,
  15. pointRadius: 0,
  16. },
  17. ],
  18. },
  19. options: {
  20. legend: {
  21. display: false,
  22. },
  23. },
  24. }

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

展开查看全部

相关问题