Кейс: графики в ячейках таблицы

азвание кейса	Графики в ячейках таблицы
Описание кейса	Строит графики в последнем столбце таблицы, на основе данных из остальных столбцов
Версия платформы	2.16
Статус	ЧЕРНОВИК
Сложность	просто
Используемые библиотеки	стандартные

📋 Вступление

В данном примере в последнем столбце таблицы отрисовывается графики Highcharts на основе данных из предыдущих ячеек в строке. Для отрисовки графика добавляется пустой Расчётный столбец.

📚 Данные

Данные, привязанные к виджету:

Столбцы	Показатель, Год, Квартал
Строки	Товары

Просмотр части данных в виде таблицы:

Код

В начале выполняется стандартный код отрисовки таблицы. Затем перебираются все строки с данными в таблице и в каждой строке строке создаётся массив с данными для отрисовки на графике. После создания массива данных в строке, отрисовывается график с данными из массива. Точки на графике отображаются в том порядке, в котором они идут в строке. Высота контейнера с графиком равна 65 рх и задаётся в 22 строке кода.

Развернуть / Свернуть блок кода

TableRender({
    table: w.general,
    style: w.style,
    columns: w.data.columns,
    records: w.data.records,
    editMask: w.data.editMask,
    rowNames: w.data.rowNames,
    colNames: w.data.colNames,
    showToolbar: false
});

var td;
var table = document.getElementById('table-'+w.general.renderTo);

for ( var i = 3; i < table.rows.length; i ++){
    var data = [];
    
    for (var n = 1; n <table.rows[i].cells.length-1; n++){
        if (isNaN(parseInt(table.rows[i].cells[n].innerHTML))) { data.push(0)}
        else {data.push(parseInt(table.rows[i].cells[n].innerHTML))}
    }
    table.rows[i].cells[table.rows[i].cells.length-1].innerHTML= '<div style="height: 65px"></div>'
    Highcharts.chart(table.rows[i].cells[table.rows[i].cells.length-1].firstChild,{
    
    xAxis: {
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                startOnTick: false,
                endOnTick: false,
                tickPositions: []
            },
    yAxis: {
                endOnTick: false,
                startOnTick: false,
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                tickPositions: [0]
            },
    plotOptions: {
                series: {
                    animation: false,
                    lineWidth: 1,
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    marker: {
                        radius: 1,
                        states: {
                            hover: {
                                radius: 2
                            }
                        }
                    },
                    fillOpacity: 0.25
                },
                column: {
                    negativeColor: '#910000',
                    borderColor: 'silver'
                }
            },
     series: [{
                data: data,
                pointStart: 1
            }],
    chart: {
        backgroundColor: "#ffffff"},
    legend: {
                enabled: false
            },
    tooltip: {
                hideDelay: 0,
                outside: true,
                shared: true
            },
});
}

📋 Вступление

📚 Данные

Данные, привязанные к виджету:

Просмотр части данных в виде таблицы:

Код

📊 Живой пример

💡 Советы и лайфхаки