反应我想在反应图表中隐藏 y 轴值和工具提示

Question

我正在使用 react-chart-2。
当我悬停折线图时，会显示工具提示，但我想在悬停折线图时隐藏工具提示。
我还想隐藏折线图左侧（y 轴）的数字 0,0.1,0.2 到 1。
我该如何实现它来隐藏折线图的 y 轴？
另外，如何在折线图中隐藏工具提示？
code

import React from "react";
import { Bar } from "react-chartjs-2";

const data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
      label: "Sales",
      type: "line",
      data: [51, 300, 40, 49, 60, 37, 40],
      fill: false,
      borderColor: "#555555",
      backgroundColor: "#555555",
      pointBorderColor: "#000000",
      pointBackgroundColor: "#EC932F",
      pointHoverBackgroundColor: "#EC932F",
      pointHoverBorderColor: "#EC932F",
      yAxisID: "y-axis-1"
    },
    {
      type: "bar",
      label: "Visitor",
      data: [200, 185, 590, 621, 250, 400, 95],
      fill: false,
      backgroundColor: "#F7C520",
      borderColor: "#F7C520",
      hoverBackgroundColor: "#E6B71E",
      hoverBorderColor: "#E6B71E",
      yAxisID: "y-axis-1"
    }
  ]
};

const options = {
  responsive: true,
  tooltips: {
    mode: "label"
  },
  elements: {
    line: {
      fill: false
    }
  },
  scales: {
    xAxes: [
      {
        display: true,
        gridLines: {
          display: true
        }
      }
    ],
    yAxes: [
      {
        type: "linear",
        display: true,
        position: "left",
        id: "y-axis-1",
        gridLines: {
          display: true
        }
      },
      {
        type: "linear",
        display: true,
        position: "right",
        id: "y-axis-2",
        gridLines: {
          display: false
        }
      }
    ]
  }
};

class MixExample extends React.Component {
  render() {
    return (
      <div>
        <h2>Mixed data Example</h2>
        <Bar data={data} options={options} />
      </div>
    );
  }
}

export default MixExample;

Answer 1

react-chartjs-2 有 2 个与此问题相关的主要版本：v2，它支持 chart.js 2.9.4 及以下版本，以及 v3，它显着改变了许多选项和配置，以及支持 chart.js 3.0.0 及以上版本。

你的codesandboxlink的original fork使用chart.js: 2.9.4和react-chartjs-2: 2.1.1，这与你提供的sandboxlink不同，后者使用chart.js: 3.5.1 和 react-chartjs-2: 3.0.4。值得注意的是，不要像

这样构造你的选项对象

scales: {
  x-axes: [ /* array of axis options... */],
  y-axes: [ /* array of axis options... */],
}

其中每个轴都有一个 axisID 属性，您以 axisID 为键构造它们，原始选项对象的其余部分为值，例如：

scales: {
    "x-axis-1": {
      display: true,
      gridLines: {
        display: false
      }
    },
    "y-axis-1": {
      type: "linear",
      display: false,
      position: "left"
    }
}

此外，可以通过将工具提示移动到插件中来禁用工具提示，正如 chart.js 文档所说 tooltip is a part of plugins:

global options for the chart tooltips is defined in Chart.defaults.plugins.tooltip

因此，要完全禁用工具提示：

plugins: {
  tooltip: {
    enabled: false
  }
}

由于您只想禁用单个数据集的工具提示，找到的解决方案 may be of some use, but I haven't tried either for myself. It may also be possible to set the global default for Chart.JS tooltips to false, then enable it on a dataset-by-dataset basis, as displayed here, accessing it via react-chartjs-2's chart ref。

对于该级别的自定义，我强烈建议从 react-chartjs-2 的最新版本和其中的示例开始，而不是您当前的 v2 配置起点。

反应我想在反应图表中隐藏 y 轴值和工具提示

react I want to hide the y-axis values and tooltip in the react chart

typescript

reactjs

react-chartjs-2

反应 我想在反应图表中隐藏 y 轴值和工具提示

react I want to hide the y-axis values and tooltip in the react chart

typescript

reactjs

react-chartjs-2

反应我想在反应图表中隐藏 y 轴值和工具提示