首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何利用Chart.js将图表的背景色作为渐变

如何利用Chart.js将图表的背景色作为渐变
EN

Stack Overflow用户
提问于 2021-02-10 14:19:53
回答 1查看 6K关注 0票数 1

我正试图用Chart.js在React中制作一个线条图。我没有使用DOM来创建和到达画布。我可以安排背景色,但我只想把它做成渐变。我怎么能这么做?

My代码如下:

代码语言:javascript
运行
复制
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;

输出

EN

Stack Overflow用户

回答已采纳

发布于 2021-02-10 14:42:27

您可以使用画布"createLinearGradient“方法。

博士:https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradienthttps://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient/addColorStop

示例:https://codepen.io/alexgill/pen/MWbjXOP

代码语言:javascript
运行
复制
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)"
    }
  ]
};
票数 2
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66138685

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档