Перейти к концу метаданных
Переход к началу метаданных

Вы просматриваете старую версию данной страницы. Смотрите текущую версию.

Сравнить с текущим просмотр истории страницы

« Предыдущий Версия 3 Следующий »

Название кейса

Графики в ячейках таблицы

Описание кейса

Строит графики в последнем столбце таблицы, на основе данных из остальных столбцов

Версия платформы

2.16

Статус

ЧЕРНОВИК

Сложность(синяя звезда)

просто

Используемые библиотеки

стандартные

📋 Вступление

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

📚 Данные

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

Столбцы

Показатель, Год, Квартал

Строки

Товары

<При наличии любых других настроек - добавить строки в таблицу>

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

(синяя звезда) Код

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

 Развернуть / Свернуть блок кода
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
            },
});
}

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

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

  • Нет меток