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

Question

我使用的是react-chat-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.jsp 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的沙箱链接不同。值得注意的是，不是像那样构建你的期权对象

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文档说工具提示是插件的一部分：

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

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

plugins: {
tooltip: {
enabled: false
}
}

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

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