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

Question

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

我的代码不起作用

我不是程序员:(

演示代码

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

图片

谢谢 ！

代码

$(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>
   
   

标签： chartshighchartsdatatables

Answer 1

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

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