Название кейса | Графики в ячейках таблицы |
|---|
Описание кейса | Строит графики в последнем столбце таблицы, на основе данных из остальных столбцов |
|---|
Версия платформы | 2.16 |
|---|
Статус | |
|---|
Сложность | просто |
|---|
Используемые библиотеки | стандартные |
|---|
📋 Вступление
...
Image RemovedВ данном примере в последнем столбце таблицы отрисовывается графики Highcharts на основе данных из предыдущих ячеек в строке. Для отрисовки графика добавляется пустой Расчётный столбец.
...
📚 Данные
...
Данные, привязанные к виджету:
Столбцы | Показатель, Год, Квартал |
|---|
Строки | Товары |
|---|
<При наличии любых других настроек - добавить строки в таблицу>
Просмотр части данных в виде таблицы:
...
Код
...
В начале выполняется стандартный код отрисовки таблицы. Затем перебираются все строки с данными в таблице и в каждой строке строке создаётся массив с данными для отрисовки на графике. После создания массива данных в строке, отрисовывается график с данными из массива. Точки на графике отображаются в том порядке, в котором они идут в строке.
| Раскрыть |
|---|
| 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 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 |
|---|
|
...