数据表：如何在子行中添加图表div-

Question

如何在datatables子行中添加图表div？

我的代码无效

我不是程序员:(

演示代码

  

https：// codepen.io/intprotest/pen/QXPmBr

image

谢谢！

代码

$(document).ready(function (){
    var table = $('#example').DataTable({
        responsive: true        
    });
});
 
  
Highcharts.chart('chart1', {
  
    data: {
        googleSpreadsheetKey: '1KKJgBPhFQzNzvgGHz7ygwuTJl5mXlxh1GTxOYxfyVqg'
    }
  

}); 

<!-- begin snippet: js hide: false console: true babel: false -->

 
 
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th >geo </th>
        <th> ge</th>
       
        <th class="none">... </th>
    </tr>

    <tr>
        <td>HighCharts Code </td>
        <td>Junior Technical Author</td>
        <td> 1</td>
        <td>2 </td>
        <td>  
		 <div id="chart1" style="width: 300px; height: 140px;"></div>
				 
      </td>
    </tr>
   
   

 

Answer 1

此问题与您正在使用的数据表有关。似乎在扩展行时，最后一个元素的内容将被复制到新创建的元素。不幸的是，它不适用于Highcharts。

当您更改css选项并显示最后一列（Highcharts的容器）时，您会看到图表工作正常。在新的child元素中，只有“真实”图表的副本。因此，问题在于数据表及其工作方式。