如何在 React 項目中隱藏 chart.js 中的圖例？

Question

我試圖隱藏使用 Chart.js 創建的圖表的圖例。

根據官方文檔 ( https://www.chartjs.org/docs/latest/configuration/legend.html )，要隱藏圖例， options.display object 的display屬性必須設置為false 。

我試圖通過以下方式做到這一點：

const options = {
    legend: {
        display: false,
    }
};

但是不管用，我的傳說還在。 我什至嘗試過其他方式，但不幸的是，沒有成功。

const options = {
    legend: {
        display: false,
            labels: {
                display: false
            }
        }
    }
};

這是我的完整代碼。

import React, { useEffect, useState } from 'react';
import { Line } from "react-chartjs-2";
import numeral from 'numeral';

const options = {
    legend: {
        display: false,
    },
    elements: {
        point: {
            radius: 1,
        },
    },
    maintainAspectRatio: false,
    tooltips: {
        mode: "index",
        intersect: false,
        callbacks: {
            label: function (tooltipItem, data) {
                return numeral(tooltipItem.value).format("+0,000");
            },
        },
    },
    scales: {
        xAxes: [
            {
                type: "time",
                time: {
                    format: "DD/MM/YY",
                    tooltipFormat: "ll",
                },
            },
        ],
        yAxes: [
            {
                gridLines: {
                    display: false,
                },
                ticks: {
                    callback: function(value, index, values) {
                        return numeral(value).format("0a");
                    },
                },
            },
        ],
    },
};

const buildChartData = (data, casesType = "cases") => {
    let chartData = [];
    let lastDataPoint;

    for(let date in data.cases) {
        if (lastDataPoint) {
            let newDataPoint = {
                x: date,
                y: data[casesType][date] - lastDataPoint
            }
            chartData.push(newDataPoint);
        }
        lastDataPoint = data[casesType][date];
    }
    return chartData;
};

function LineGraph({ casesType }) {

    const [data, setData] = useState({});

    useEffect(() => {
        const fetchData = async() => {
            await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
            .then ((response) => {
                return response.json();
            })
            .then((data) => {
                let chartData = buildChartData(data, casesType);
                setData(chartData);
            });
        };
        fetchData();
    }, [casesType]);

    return (
        <div>
            {data?.length > 0 && (
            <Line 
                data={{
                    datasets: [
                        {
                            backgroundColor: "rgba(204, 16, 52, 0.5)",
                            borderColor: "#CC1034",
                            data: data
                        },
                    ],
                }}
                options={options}
            />
            )}
        </div>
    );
}

export default LineGraph;

有人可以幫我嗎？ 先感謝您！

PD：也許對嘗試找到解決方案很有用，但我在圖例文本中得到“未定義”，當我嘗試像這樣更改文本時，文本圖例仍然顯示為“Undefindex”。

const options = {
    legend: {
        display: true,
        text: 'Hello!'
    }
};

Answer 1

在最新版本中，這段代碼工作正常

 const options = { plugins: { legend: { display: false, }, }, }; return <Doughnut data={data} options={options} />;

Answer 2

如文檔中所述，您鏈接了配置圖例的命名空間： options.plugins.legend ，如果將其放在那里，它將起作用：

 var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderColor: 'pink' } ] }, options: { plugins: { legend: { display: false } } } } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script> </body>

另請注意，您的選項對象的很大一部分是錯誤的，在您使用 v3 時使用的是 V2 語法，請查看遷移指南

您在圖例中undefined為文本的原因是因為您沒有在數據集中提供任何label參數。

Answer 3

在圖表組件中導入您的選項值，如下所示：

常量選項= {圖例：{顯示：假}}；

如何在 React 項目中隱藏 chart.js 中的圖例？

問題描述

3 個解決方案

解決方案1
3 2022-04-27 15:45:05

解決方案2
1 2021-08-02 17:20:50

解決方案3
0 2022-01-24 22:29:55

如何在 React 項目中隱藏 chart.js 中的圖例？

問題描述

3 個解決方案

解決方案1 3 2022-04-27 15:45:05

解決方案2 1 2021-08-02 17:20:50

解決方案3 0 2022-01-24 22:29:55

解決方案1
3 2022-04-27 15:45:05

解決方案2
1 2021-08-02 17:20:50

解決方案3
0 2022-01-24 22:29:55