ChartJS 如何将图表背景borderColor渐变添加到Next.js

mefy6pfw 于 2022-11-07 发布在 Chart.js

关注(0)|答案(2)|浏览(259)

我想给图表背景添加渐变。下面是一个例子：

我使用的是Next.js和react-chart.js。
下面是我的代码的一个例子：

import { ChartProps } from "./Chart.props";
import styles from "./Chart.module.css";
import React, { useState, useEffect, useRef } from 'react';
import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, ScriptableContext, } from "chart.js";
import { Chart, Line } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Legend, CategoryScale, LinearScale, PointElement, LineElement);
import { optionsChart } from "./ChartConfig.js";
export const CoinPriceChart = (props) => {
    const data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
        datasets: [
            {
                data: [22, 45, 23, 41, 18, 11, 32, 31, 63, 54, 45, 49, 54, 36],
                pointRadius: 0,
                pointHoverRadius: 2,
                borderColor: "rgba(91,56,237,255)",
            }
        ],
        options: {
            ...optionsChart
        },
    };
    return (
        <div
            className={styles.CardList}
            {...props}
        >
            <Line id="myChart" data={data} options={optionsChart}/>
        </div>
    );
};

有一次我试着这样做：

但是在React中（不是在Node.js中），在Node.js中它对我不起作用。
下面是我的图表（现在）的样子：

等待您的建议。提前感谢！

chart.js

来源：https://stackoverflow.com/questions/72775774/how-to-add-chart-background-bordercolor-gradient-to-next-js

2条答案

按热度按时间

eiee3dmh1#

这是因为在chart.js V3中，折线图在默认情况下是不填充的。您需要导入填充插件，并告诉数据集如下填充：

import {Chart, Filler} from 'chart.js'
import {Chart as ReactChart, Line} from 'react-chartjs-2'
Chart.register(Filler);
const data = {
  labels: labels,
  datasets: [{
    data: data,
    fill: true // Set fill to true to enable the backgroundColor under the line
  }]
}

赞(0）回复(0）举报 2022-11-07

cs7cruho2#

//Importing stuff
import React from 'react';
import { Chart as ChartJS, ArcElement, CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip, Legend, ScriptableContext, } from "chart.js";
import { Chart as ReactChart, Line } from "react-chartjs-2";
ChartJS.register(ArcElement, Tooltip, Filler, Legend, CategoryScale, LinearScale, PointElement, LineElement);
// init our Line Chart with gradient of course
export const CoinPriceChart = (props) => {
    const data = {
        labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14"],
        datasets: [
            {
                data: [22, 45, 23, 41, 18, 11, 32, 31, 63, 54, 45, 49, 54, 36],
                pointRadius: 0,
                pointHoverRadius: 2,
                backgroundColor: (context: ScriptableContext<"line">) => {
                    const ctx = context.chart.ctx;
                    const gradient = ctx.createLinearGradient(0, 0, 0, 250);
                    gradient.addColorStop(0, "rgba(91,56,237,0.45)");
                    gradient.addColorStop(1, "rgba(91,56,237,0.0)");
                    return gradient;
                }, //background gradient color
                borderColor: "rgba(91,56,237,255)", //line color
                fill: true, // this line allow us to use background gradient
            }
        ],
    };
    return (
        <div
            {...props}
        >
            <Line id="myChart" data={data} /> 
        </div>
    );
};

下面的结果看起来像：

并且不要忘记将此组件导入到主app.js文件中

import { CoinPriceChart } from '../shared/components';//your path of course
            <CoinPriceChart data={coinData}></CoinPriceChart>

展开查看全部

赞(0）回复(0）举报 2022-11-07

我来回答

ChartJS 如何将图表背景borderColor渐变添加到Next.js

2条答案

相关问题

热门标签

最新问答