我正试图用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;
发布于 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)"
}
]
};
https://stackoverflow.com/questions/66138685
复制相似问题