如何在React项目中隐藏chart.js中的图例？

Question

如何在React项目中隐藏chart.js中的图例？

Caí*_*aín 10 javascript reactjs chart.js

我试图隐藏使用 Chart.js 创建的图表的图例。

根据官方文档（https://www.chartjs.org/docs/latest/configuration/legend.html），要隐藏图例，必须将对象display的属性options.display设置为false。

我尝试通过以下方式做到这一点：

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

Run Code Online (Sandbox Code Playgroud)

但这不行，我的传奇还在。我什至尝试过其他方法，但不幸的是，没有成功。

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

Run Code Online (Sandbox Code Playgroud)

这是我的完整代码。

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;

Run Code Online (Sandbox Code Playgroud)

有人可以帮助我吗？先感谢您！

PD：也许对于尝试找到解决方案很有用，但是我在图例的文本中得到“未定义”，当我尝试像这样更改文本时，文本图例仍然显示为“Undefindex”。

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Lee*_*lee 12

如文档中所述，您链接的图例配置的命名空间是：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);

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

另一方面，您的选项对象的很大一部分是错误的，当您使用v3时，它是V2语法，请查看迁移指南

您在图例中获得文本的原因undefined是因为您没有label在数据集中提供任何参数。

Answer 2

Ahm*_*oya 8

在最新版本中，这段代码工作正常

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，10 月前
查看次数：	10915 次
最近记录：	4 年，1 月前