使用 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等。

這是代碼沙箱

這是output圖片