ReactJs HighCharts切换表和图表不更新

Question

我想使用切换按钮显示表格及其图表。默认它应该显示图表，当我点击按钮时，它应该改为表格视图。首次单击它可以工作，但从第二次单击不起作用。

我创建了codesandbox项目。 CodeSandbox

我在这段代码中犯了什么错误。

Answer 1

动态更改showTable选项不会更改表格的显示。您需要切换容器可见性：

Highcharts.Chart.prototype.viewData = function () {
  $(this.renderTo).toggle();
  if (!this.insertedTable) {
    var div = document.createElement('div');
    div.className = 'highcharts-data-table';
    // Insert after the chart container
    this.renderTo.parentNode.insertBefore(div, this.renderTo.nextSibling);
    div.innerHTML = this.getTable();
    this.insertedTable = true;
    div.id = this.container.id + '-data-table';
  } else {
    $('#' + this.container.id + '-data-table').toggle();
  }
};

现场演示：https://codesandbox.io/s/l4x11ykm67

API参考：https://api.highcharts.com/highcharts/exporting.showTable