怎么在最新的Chart JS版本(3.3.2)中创建渐变填充折线图？

本教程将介绍如何在最新的Chart JS版本(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)中创建渐变填充折线图？的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。