Chart.Js条形图没有在React应用程序中显示Toolip

Question

我介绍了在一个电子包装反应应用程序中使用chart.js时遇到的一些问题。由于某些原因，创建的图表上的工具提示突然停止工作(它已经工作得很好)。该图表似乎绘制正确，只有工具提示悬停不起作用。下面的代码片段定义了react组件中图表的数据：

组件

 class App extends Component {
  constructor() {
        super();
    this.state = {
    value: 'Click to Upload File',
    filepath: 'No File selected!',
        foundIssues: "",
        foundIssuesFixableWithUpdate: "",
        chartData:{
            labels: ['1', '2', '3', '4','55','6'],
            datasets:[
                                        {
                    label: 'Vulnerabilities',
                    data:[12,14,15,16,18,19],
                                        }
                                ]}}}

在实际呈现功能中，图表实现如下：

渲染

 render() {
     return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
        </div>
         <div className ="Chart">
            <Bar data={this.state.chartData}/>
         </div>
   </div>
    );
  }

正如我已经提到的，图形将被正确显示，如您在下面的图片中所看到的：

​

​

但不幸的是，悬停的工具提示不起作用。有人能帮我吗？

Answer 1

我缩小了问题的范围。我的电子应用程序配置(我将窗口设置为无边界)似乎干扰了工具提示。

这是创建电子应用程序的函数：

electron.js

function createWindow() {
  mainWindow = new BrowserWindow({frame: false, titleBarStyle: 'hidden' ,width: 800, height: 1000, backgroundColor: '#FFFFFF' });
  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );

在将“窗口框架”选项更改为以下内容后，工具提示再次工作：

frame: false

因此，出于某种原因，要在电子包装的reason应用程序中使用chartjs的工具提示，您需要启用实际应用程序的边框窗口。