Question

我在电子包裹的React应用程序中使用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

因此，由于某种原因，要在电子包装的React应用程序中使用带有Chartjs的有效工具提示，您需要为实际应用程序启用边框窗口。

Chart.Js条形图未在React App中显示Toolip

1 个答案: