如何利用Chart.js将图表的背景色作为渐变
如何利用Chart.js将图表的背景色作为渐变
提问于 2021-02-10 14:19:53
我正试图用Chart.js在React中制作一个线条图。我没有使用DOM来创建和到达画布。我可以安排背景色，但我只想把它做成渐变。我怎么能这么做？
My代码如下：
import React from "react";
import { Line } from "@reactchartjs/react-chart.js";
const data = {
labels: ["day1", "day2", "day3", "day4", "day5", "day6"],
datasets: [
{
label: "Your BMI",
data: [28.3, 28, 27, 27.6, 25, 25.6],
fill: true,
backgroundColor: "rgba(10,10,10,.2)",
borderColor: "rgba(152,222,217,0.2)"
}
]
};
const options = {
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
}
}
]
}
};
const LineChart = () => (
<>
<Line data={data} options={options} />
</>
);
export default LineChart;
Stack Overflow用户
回答已采纳
发布于 2021-02-10 14:42:27
您可以使用画布"createLinearGradient“方法。
博士：https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient，https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop
示例：https://codepen.io/alexgill/pen/MWbjXOP
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var gradient = ctx.createLinearGradient(0, 0, 0, 400);
gradient.addColorStop(0, 'rgba(10,10,10,.2)');
gradient.addColorStop(1, 'rgba(255,255,255,1)');
const data = {
labels: ["day1", "day2", "day3", "day4", "day5", "day6"],
datasets: [
{
label: "Your BMI",
data: [28.3, 28, 27, 27.6, 25, 25.6],
backgroundColor : gradient,
borderColor: "rgba(152,222,217,0.2)"
}
]
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66138685
复制相关文章
相似问题
腾讯云开发者
