Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

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

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

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

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

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

2.16

Статус

Статус
colourGreen
titleПроверено

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

просто

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

стандартные

📋 Вступление

...

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

...

📚 Данные

...

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

Столбцы

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

Строки

Товары

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

...

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

...

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

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

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

...

Плавающий фрейм
srchttps://prod-bi.polymedia.ru/viewer/public?dashboardGuid=5cb9f3aedec5494d92cf02571738f57e&fit=true
width640
frameborderhide
alignmiddle
height400

...