如何在 react 项目中隐藏 chart.js 中的图例?

2022-01-22 00:00:00 reactjs javascript 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.

相关文章