如何在 react 项目中隐藏 chart.js 中的图例?-前端问题

How to hide the legend in chart.js in a react project?(如何在 react 项目中隐藏 chart.js 中的图例?)

本文介绍了如何在 react 项目中隐藏 chart.js 中的图例?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试隐藏使用 Chart.js 创建的图表的图例.

根据官方文档(

解决方案

如文档中所述，您将配置图例的命名空间链接为:options.plugins.legend，如果你把它它会在那里工作:

var options = {类型:'线'，数据: {标签:[红色"，蓝色"，黄色"，绿色"，紫色"，橙色"]，数据集:[{标签:'投票数'，数据:[12、19、3、5、2、3]，边框颜色:'粉红色'}]},选项: {插件:{传奇: {显示:假}}}}var ctx = document.getElementById('chartJSContainer').getContext('2d');新图表(ctx，选项)；

<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 参数.

I am trying to hide the legend of my chart created with Chart.js.

According to the official documentation (https://www.chartjs.org/docs/latest/configuration/legend.html), to hide the legend, the display property of the options.display object must be set to false.

I have tried to do it in the following way:

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

But it doesn't work, my legend is still there. I even tried this other way, but unfortunately, without success.

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

This is my full code.

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;

Could someone help me? Thank you in advance!

PD: Maybe is useful to try to find a solution, but I get 'undefined' in the text of my legend and when I try to change the text like this, the text legend still appearing as 'Undefindex'.

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

解决方案

As described in the documentation you linked the namespace where the legend is configured is: options.plugins.legend, if you put it there it will work:

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>

On another note, a big part of your options object is wrong, its in V2 syntax while you are using v3, please take a look at the migration guide

Reason why you get undefined as text in your legend is, is because you dont supply any label argument in your dataset.

这篇关于如何在 react 项目中隐藏 chart.js 中的图例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！