Question

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

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

数据表父行（google）
highcharts子行（microsoft）
数据表父行（google）
highcharts子行（microsoft）

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

完整代码

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

enter image description here

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事件函数中创建图表：

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

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

1 个答案: