如何在最新的Chart JS版本(3.3.2)中创建渐变填充折线图？ [英] How to create a gradient fill line chart in latest Chart JS version (3.3.2)?

问题描述

我想知道如何创建梯度折线图，像这样填写Chart JS版本3.3.2：

这个StackOverflow question在近6年前就得到了回答。版本3.3.2在2021年的解决方案是什么？

我已经尝试了旧的解决方案，但没有效果：

代码：

    var ctx = document.getElementById('chart').getContext('2d');
    
    var gradient = ctx.createLinearGradient(0, 0, 0, 300);
        gradient.addColorStop(0, 'rgba(224, 195, 155, 1)');   
        gradient.addColorStop(1, 'rgba(100, 100, 0,0)');
        
    var myChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
            datasets: [{
                backgroundColor: gradient,
                    label: 'Numbers',
                data: [12, 19, 3, 5, 2, 3],
            }]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
            },
            tension: 0.3
        }
    });

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>

JSFiddle

推荐答案

您几乎在那里，在v3中，默认情况下折线图不会填满，因此您需要设置fill: true

示例

    var ctx = document.getElementById('chart').getContext('2d');

    var gradient = ctx.createLinearGradient(0, 0, 0, 300);
    gradient.addColorStop(0, 'rgba(224, 195, 155, 1)');
    gradient.addColorStop(1, 'rgba(100, 100, 0,0)');

    var myChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          backgroundColor: gradient,
          label: 'Numbers',
          fill: true,
          data: [12, 19, 3, 5, 2, 3],
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        },
        tension: 0.3
      }
    });

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<canvas id="chart" width="800" height="400"></canvas>

这篇关于如何在最新的Chart JS版本(3.3.2)中创建渐变填充折线图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！