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

2023-11-01前端开发问题

本文介绍了如何在 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 中的图例?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

The End

相关推荐

如何使用百度地图API获取地理位置信息

js删除数组中指定元素的5种方法

JavaScript小数运算出现多位的解决办法

JavaScript(js)文件字符串中丢失＂\＂斜线的解决方法

layui中table列表增加属性 edit=＂date＂，不生效怎么办？

正则表达式([A-Za-z])为啥可以匹配字母加数字或特殊符号？

热门文章

热门精品源码

最新VIP资源