使用 react-chartjs-2 的折线图图例边框样式

Question

能否让折线图中虚线的图例框没有虚线边框？

我阅读了 generateLegend() 和 legendCallback，但我无法理解它在 react-chartjs-2 中如何与 React 功能组件一起工作。另外，我不确定它们是否可以用于更改图例的边框样式。

这是我的示例代码：

import { Line } from "react-chartjs-2";

const LineChart = () => {
    const data = {
        labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
        datasets: [
            {
                label: "Line 1", data: [10, 10, 20, 20, 30, 30]
            },
            {
                label: 'Line 2',
                borderDash: [15, 5],
                data: [20, 20, 20, 20, 20, 20],
            }],
    };

    const options = {
        legend: {
            position: legendPosition,
            align: legendAlign,
        }
    };

    return <Line data={data} options={options} />
};

这是所需第 1 行（红色）和第 2 行（灰色虚线）的示例

Answer 1

你必须使用 borderWidth:0 所以，请删除 borderDash: [15, 5] 并添加 borderWidth: 0,。或者你可以完全替换数据如下：

const data = {
    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    datasets: [
        {
            borderWidth: 0,
            label: "Line 1", data: [10, 10, 20, 20, 30, 30]
        },
        {
            label: 'Line 2',
            borderWidth: 0,
            data: [20, 20, 20, 20, 20, 20],
        }],
};

更新

您必须在 data.datasets 中使用 borderWidth: 0，这对您的要求是强制性的。此外，您可以将 options={options} 传递给 Line 以获得更多图例配置，例如 legend background-color 或 legend font-color 或 legend boxWidth 等等。

这里是Code Sandbox

这里是输出图片

使用 react-chartjs-2 的折线图图例边框样式

Line chart legend border style using react-chartjs-2

reactjs

react-chartjs