Как добавить высокие диаграммы в дочернюю строку Datatables, из листов Google? - PullRequest
Новая
       14

Как добавить высокие диаграммы в дочернюю строку Datatables, из листов Google?

0 голосов
/ 08 июля 2019

как добавить старшие диаграммы в дочерние строки таблицы данных?

У меня есть таблицы данных + листы, и я хочу добавить старшие диаграммы в дочерние строки

  1. родительская строка таблицы данных (Google)
  2. дочерняя строка highcharts (microsoft)
  3. родительская строка datatables (google)
  4. дочерняя строка highcharts (microsoft)

пожалуйста, помогите мне, я не знаю jsи я не программист

полный код 

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

введите описание изображения здесь

1 Ответ

0 голосов
/ 08 июля 2019

Прежде всего, вам нужно добавить исходный код 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

...