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

Question

我用的是反应图2。

当我悬停线状图时，会显示工具提示，但我想在悬停线状图时隐藏工具提示。

我还想隐藏线图左边(y轴)上的数字0,0.1,0.2到1。

如何实现这一点以隐藏直线图的y轴？

另外，如何将工具提示隐藏在线条图中？

代码

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有两个与此问题相关的主要版本: v2 (它支持chart.js 2.9.4及更低版本)和v3 (它显着地改变了许多选项和配置，并且支持chart.js 3.0.0和更高版本)。

代码框链接的原叉使用chart.js: 2.9.4和react-chartjs-2: 2.1.1，这与您提供的沙箱链接不同，沙箱链接使用chart.js: 3.5.1和react-chartjs-2: 3.0.4。值得注意的是，不要像这样构造options对象

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

在每个轴都有一个axisID属性的情况下，使用axisID作为键对它们进行结构，而原始options对象的其余部分是值，如：

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

此外，可以通过将工具提示移动到插件中来禁用工具提示，正如chart.js文档中所说的那样，工具提示是插件的一部分。

图表工具提示的全局选项在Chart.defaults.plugins.tooltip中定义。

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

plugins: {
  tooltip: {
    enabled: false
  }
}

因为您只想禁用单个数据集的工具提示，所以找到的解决方案这里可能有一些用处，但我自己也没有尝试过。还可以将Chart.JS工具提示的全局默认值设置为false，然后在dataset逐数据集的基础上启用它，如显示的这里，通过react chartjs-2的图表参考文献访问它。

对于这种定制级别，我强烈建议从最最新版本的react-chartjs-2及其示例开始，而不是从当前的v2配置的起点开始。