如何使用react-chartjs-2删除X轴和Y轴

t1rydlwq 于 2022-11-07 发布在 Chart.js

关注(0)|答案(1)|浏览(203)

我在任何地方都找不到这个问题的解决方案，这让我抓狂。我有一个使用react-chartjs-2包的折线图。下面是我的代码：

const CHARTDATA = {
    labels: dates,
    datasets: [
      {
        backgroundColor: dates[0]! > dates[dates.length - 1]! ? "red" : "green",
        borderColor: dates[0]! > dates[dates.length - 1]! ? "red" : "green",
        data: prices,
      },
    ],
  };

  const CHARTOPTIONS = {
    responsive: true,
    plugins: {
      legend: {
        display: false,

      },

    },
  };

  return <Line data={CHARTDATA} options={CHARTOPTIONS} />;

所有这些工作正常，但我不知道如何定制轴（y和x）。我所要做的就是删除这两个轴的标题，这样左手就没有文本了（y轴）或底部（x轴）。我猜它在 * 图表 * 的某个地方，但不太确定。我在网上找到了很多相互矛盾的答案，我真的认为这个软件包的文档很糟糕。有人知道如何定制轴吗？

chart.js

来源：https://stackoverflow.com/questions/72808960/how-to-remove-x-and-y-axis-with-react-chartjs-2

1条答案

按热度按时间

q7solyqu1#

在React-chartjs-2中，如果你想隐藏轴标签，你必须配置chartOptions。
下面是隐藏标签的方法，当然，您可以通过查看示例来使用许多其他选项。
React-chartjs-2 examples

const CHARTOPTIONS = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
  },

  // Modify the axis by adding scales
  scales: {
    // to remove the labels
    x: {
      ticks: {
        display: false,
      },

      // to remove the x-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
    // to remove the y-axis labels
    y: {
      ticks: {
        display: false,
        beginAtZero: true,
      },
      // to remove the y-axis grid
      grid: {
        drawBorder: false,
        display: false,
      },
    },
  },
};

赞(0）回复(0）举报 2022-11-07

我来回答

如何使用react-chartjs-2删除X轴和Y轴

1条答案

相关问题

热门标签

最新问答