react-chartjs2:如何隐藏在线图中出现在图线(而不是x / y轴)上方的标签(而不是出现在顶部的图例)?[副本]

r1zk6ea1  于 2023-10-18  发布在  Chart.js
关注(0)|答案(1)|浏览(134)

这个问题已经有答案了

ChartJs 2 How to remove numbers from the doughnut chart on loading(1个答案)
11天前关闭
我希望图表看起来如何:

它目前的样子:

组件代码:

function LineGraph() {

  ChartJS.register(
    CategoryScale,
    LinearScale,
    PointElement,
    LineElement,
    Title,
    Tooltip,
    Filler,
    Legend
  );

  const data = {
    labels: [10, 20, 30, 40, 50, 60, 70],
    datasets: [
      {
        data: [50, 35, 45, 42, 70, 65, 100], // Add your data here
        pointRadius: 0,
        fill: 'origin', // This fills the area under the line
        backgroundColor: (context: any) => {
          const ctx = context.chart.ctx;
          const gradient = ctx.createLinearGradient(0, 0, 0, 200);
          gradient.addColorStop(0, "#EEECFE");
          gradient.addColorStop(1, "#EEECFE80");
          return gradient;
        }, // Set the color you want
        borderColor: '#A496FF', // Set the color of the line
        tension: 0.5,
      },
    ],
  };

  const options = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        display: false // This hides the legend

      }
    },
    scales: {
      x: { // Hides the x-axis labels
        display: false,
        ticks: {
          display: false
        }
      },
      y: { // Hides the y-axis labels
        display: false,
        min: 0,
        ticks: {
          display: false
        }
      },
    },
  };

  return (
    <div className="absolute bottom-0 px-[1.88rem] w-full h-[8.75rem]">
      <Line data={data} options={options} />
    </div>
  );
}

目标:隐藏/删除线图上可见的标签,即我们看到的那些小数据标签(35,45,42等)。
我试过在options下执行pointRadius: 0x: { ticks: { display: false } },但没有帮助。我很确定后者与线图上的标签无关。
1.我犯了什么错?
1.如何解决这一问题?

3zwjbxry

3zwjbxry1#

@uminder指出的stack-overflow帖子解决了我的问题。看看他的链接,信息量更大。
正如@uminder所回答的,Chart.js默认情况下不绘制任何标签。我已经激活了一个名为chartjs-plugin-datalabels的全局插件,用于我的另一个需要标签的甜甜圈图表。
在这里,我需要进行以下更改,以禁用该插件在此图中的工作:

options: {
  plugins: {
  // adding this to hide the datalabels.
  datalabels: {
      display: false
    }
  },
}

相关问题