Highcharts动态绑定数据后重复生成数据表格问题求助

原因 #

Highcharts的exporting.showTable功能会在页面的body末尾生成数据表格，这个表格不属于图表容器的DOM结构。每次调用Highcharts.chart()创建新的图表实例时，导出模块都会生成新的表格并追加到body中，不会自动移除之前生成的旧表格，因此多次执行创建操作后，表格会不断累积。

解决方法 #

方法1：更新现有图表数据，避免重复创建图表 #

如果已经存在图表实例hc，Ajax获取新数据后直接更新系列数据即可，无需重新创建图表，这样就不会重复生成表格：

// Ajax请求成功后，用新数据更新图表
hc.series[0].setData(yourNewData);

方法2：创建新图表前清除旧表格 #

Highcharts生成的数据表格带有固定类名highcharts-data-table，在每次创建图表前，先移除页面中所有该类的元素：

// 清除已存在的导出表格
$('.highcharts-data-table').remove();

// 再创建新图表
hc = Highcharts.chart(chartName, {
    // 你的图表配置...
});

方法3：指定表格容器，精准管理 #

提前在页面中准备一个表格容器，每次创建图表后将生成的表格移到该容器，同时清空容器内容避免累积：

<!-- 页面中添加表格容器 -->
<div id="chart-data-table"></div>

// 创建图表后，处理表格
hc = Highcharts.chart(chartName, {
    // 你的图表配置...
    exporting: {
        showTable: true
    }
});

// 将最新生成的表格移到指定容器，并清空容器
$('#chart-data-table').empty().append($('.highcharts-data-table').last());

内容的提问来源于stack exchange，提问作者Jignesh