ReactJs HighCharts切换表和图表未更新 [英] ReactJs HighCharts toggle table and chart not updating
问题描述
我想使用切换按钮显示表格及其图表.默认情况下,它应该显示图表,当我单击按钮时,它应该更改为表格视图. 第一次单击时有效,但第二次单击后无效.
I want to display table and its chart using toggle button. Default it should disply chart, when I click button, it should change to table view. On first click it works but doesn't work from second click.
我已经创建了codesandbox项目. CodeSandbox
I have created the codesandbox project. CodeSandbox
我在这段代码中犯了什么错误.
What mistake have I done in this code.
推荐答案
动态更改showTable
选项不会更改表的显示.您需要切换容器的可见性:
Dynamic change of the showTable
option does not change the display of the table. You need to toggle the containers visibility:
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
这篇关于ReactJs HighCharts切换表和图表未更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!