Название кейса | Графики в ячейках таблицы |
---|
Описание кейса | Строит графики в последнем столбце таблицы, на основе данных из остальных столбцов |
---|
Версия платформы | 2.16 |
---|
Статус | Статус |
---|
colour | Green |
---|
title | ЧерновикПроверено |
---|
|
|
---|
Сложность | просто |
---|
Используемые библиотеки | стандартные |
---|
📋 Вступление
...
В данном примере в последнем столбце таблицы отрисовывается отрисовываются графики Highcharts на основе данных из предыдущих ячеек в строке. Для отрисовки графика добавляется пустой Расчётный столбец.
...
📚 Данные
...
Данные, привязанные к виджету:
Столбцы | Показатель, Год, Квартал |
---|
Строки | Товары |
---|
<При наличии любых других настроек - добавить строки в таблицу>
Просмотр части данных в виде таблицы:
...
Код
...
В начале Вначале выполняется стандартный код отрисовки таблицы - строки 1-10. Затем перебираются все строки с данными в таблице и в каждой строке строке создаётся массив с данными для отрисовки на графике. После создания массива данных в строке, отрисовывается график с данными из массива. Точки на графике отображаются в том порядке, в котором они идут в строке. Высота контейнера с графиком равна 65 рх и задаётся в 22 строке кода.
Раскрыть |
---|
title | Развернуть / Свернуть блок кода |
---|
|
Блок кода |
---|
| 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
},
});
}
|
|
📊 Живой пример
...
Плавающий фрейм |
---|
src | https://prod-bi.polymedia.ru/viewer/public?dashboardGuid=5cb9f3aedec5494d92cf02571738f57e&fit=true |
---|
width | 640 |
---|
frameborder | hide |
---|
align | middle |
---|
height | 400 |
---|
|
...