从折线图中删除数据值和x,y轴- chartjs react

gg58donl  于 2023-10-18  发布在  Chart.js
关注(0)|答案(2)|浏览(179)

我在react应用程序中使用chartJ的折线图。它已经在折线图上显示了数据值(在我的图表中为65,59,80等)。是否可以删除或隐藏这些值?

这是我的代码

const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
      {
        label: '',
        data: [65, 59, 80, 81, 56],
        borderColor: 'rgba(75, 192, 192, 1)',
        borderWidth: 2,
        fill: false,
        pointStyle: 'hidden', // Hide data points on the chart
      },
    ],
  };

  const options = {
    scales: {
      x: {
        grid: {
          display: false, // Remove x-axis grid lines
        },
        ticks: {
          display: false, // Hide x-axis labels
        },
      },
      y: {
        grid: {
          display: false,
        },
        ticks: {
          display: false, // Hide x-axis labels
        },
      },
    },
    plugins: {
      legend: {
        display: false,
      },
      tooltips: {
        enabled: false, // Hide data values on hover
      },
    },
  };

<Line data={data} options={options} />

谢谢你

ncecgwcz

ncecgwcz1#

hidden不是点样式的有效选项。
您应该使用布尔值false来禁用它们:

const data = {
    labels: ['January', 'February', 'March', 'April', 'May'],
    datasets: [
        {
            label: '',
            data: [65, 59, 80, 81, 56],
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 2,
            fill: false,
            pointStyle: false // Hide data points on the chart
        },
    ],
};
66bbxpm5

66bbxpm52#

我找到了这个,它对我很有效

plugins: {
      datalabels: {
        display: false,
    },

相关问题