在最新的chart.js中实现渐变背景？

Question

这个问题有一个实现，我正在尝试使用最新版本的chart.js将其转移到这个演示，但是渐变设置没有生效。

有什么想法吗？

这是整个实现：

const canvas = document.getElementById('chart') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');

const config: ChartConfiguration = {
  type: 'line',
  options: {
    responsive: true,
    datasetStrokeWidth: 10,
    pointDotStrokeWidth: 14,
    tooltipFillColor: 'rgba(0,0,0,0.8)',
    tooltipFontStyle: 'bold',
    tooltipTemplate:
      "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
    scaleLabel: "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>",
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
  data: {
    labels: [
      '02:00',
      '04:00',
      '06:00',
      '08:00',
      '10:00',
      '12:00',
      '14:00',
      '16:00',
      '18:00',
      '20:00',
      '22:00',
      '00:00',
    ],
    datasets: [
      {
        lineTension: 0.4,
        strokeColor: '#ff6c23',
        pointColor: '#fff',
        fillColor: gradient, // Put the gradient here as
        pointStrokeColor: '#ff6c23',
        pointHighlightFill: '#fff',
        pointHighlightStroke: '#ff6c23',
        label: '# of Votes',
        data: [
          25.0, 32.4, 22.2, 39.4, 34.2, 22.0, 23.2, 24.1, 20.0, 18.4, 19.1,
          17.4,
        ],
        borderWidth: 1,
      },
    ],
  },
};

new Chart(ctx, config);

Answer 1

你就快到了。

您只需添加

fill: true

并将

fillColor: gradient

更改为

backgroundColor: gradient

。

以下是修改后的代码。

// Import stylesheets
import './style.css';
import { Chart, ChartConfiguration, registerables } from 'chart.js';
Chart.register(...registerables);

// Write TypeScript code!
const canvas = document.getElementById('chart') as HTMLCanvasElement;
const ctx = canvas.getContext('2d');

// Create the gradient for the chart
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(250,174,50,1)');
gradient.addColorStop(1, 'rgba(250,174,50,0)');

const config: ChartConfiguration = {
  type: 'line',
  data: {
    labels: [
      '02:00',
      '04:00',
      '06:00',
      '08:00',
      '10:00',
      '12:00',
      '14:00',
      '16:00',
      '18:00',
      '20:00',
      '22:00',
      '00:00',
    ],
    datasets: [
      {
        label: '# of Votes',
        data: [
          25.0, 32.4, 22.2, 39.4, 34.2, 22.0, 23.2, 24.1, 20.0, 18.4, 19.1,
          17.4,
        ],
        lineTension: 0.4,
        fill: true,
        backgroundColor: gradient,
        borderColor: '#ff6c23',
        borderWidth: 1,
        pointBackgroundColor: '#fff',
        pointBorderColor: '#ff6c23',
        pointHighlightFill: '#fff',
        pointHighlightStroke: '#ff6c23',
      },
    ],
  },
  options: {
    responsive: true,
    datasetStrokeWidth: 10,
    pointDotStrokeWidth: 14,
    tooltipFillColor: 'rgba(0,0,0,0.8)',
    tooltipFontStyle: 'bold',
    tooltipTemplate:
      "<%if (label){%><%=label + ' hod' %>: <%}%><%= value + '°C' %>",
    scaleLabel: "<%= Number(value).toFixed(0).replace('.', ',') + '°C'%>",
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  },
};

new Chart(ctx, config);