如何在Google表格的Datatables子行中添加图表？

Question

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

我有数据表+工作表，我想在子行中添加高图

1. datatables父行（google）
2. highcharts子行（Microsoft）
3. datatables父行（google）
4. highcharts子行（Microsoft）

请帮助我，我不懂js，我也不是程序员

完整的代码

http:// codepen.io/intprotest/pen/eXbKMj?editors=1010

在此处输入图片说明

Answer 1

首先，您需要添加Highcharts源代码：

<script src="https://code.highcharts.com/highcharts.js"></script>

接下来，您必须为图表创建一个HTML容器，例如：

function format(title) {
    return '<div class="slider" name>' +
        '<table class=table  table hover     border="0"     class="details-table">' +
        ... +

        '<div id="chart' + title[14] + '"></div>' +
        '</div>'
} 

最后，您可以在click event函数中创建一个图表：

        $('#selection-datatable tbody').on('click', 'td.details-control', function() {
            ...
            else {
                ...
                createChart('chart' + row.data()[14], row.data().slice(16));
                $('div.slider', row.child()).slideDown();
            }
        });


    });

function createChart(container, data) {

    Highcharts.chart(container, {
        series: [{
            data: (function() {
                data.forEach(function(el, i) {
                    data[i] = Number(el);
                });

                return data;
            })()
        }],
        xAxis: {
            categories: categories
        }
    })
}

---

现场演示： http : //jsfiddle.net/BlackLabel/6g02a1uz/

文件： https ： //www.highcharts.com/docs/getting-started/your-first-chart