Как построить графики/диаграммы из таблицы используя готовые JS-решения?

Question

[ongrod2]

В Excel есть масса вариантов построения графиков/диаграмм из таблиц. Пример простого мануала по этой теме - https://excelhack.ru/kak-postroit-grafik-v-excel-p...

Очень интересуют похожие решения для веба. Чтобы какой-либо JS библиотеке можно было "скормить" какую-либо HTML таблицу, а дальше она позволит строить графики различных типов, используя данные этой таблицы.

В гугле готовых решений найти не удалось, обычно находились просто JS библиотеки которым уже нужно предоставлять готовые данные по двум осям. А чтобы она сама могли "читать" таблицу и предоставлять выбор что с чем хотим сравнить и как визуализировать - такого не нашлось(

Answer 1

[Grimm26]

Берём какую-либо HTML таблицу:

<table class="table" id="dataTable" border="1">
      <thead>
      <th>имя</th>
      <th>возраст</th>
      </thead>
      <tbody>
        <tr><td>	Петя	</td><td>	13	</td></tr>
        <tr><td>	Саша	</td><td>	48	</td></tr>
        <tr><td>	Миша	</td><td>	62	</td></tr>
      </tbody>
    </table>

    <div>
    <canvas id="myChart"></canvas>
    </div>

и скармливаем JS

function BuildChart(labels, values, chartTitle) {
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: labels, // Наши метки
      datasets: [{
        label: "тест", // Название рядов
        data: values, // Значения
        backgroundColor: [ // Задаем произвольные цвета (0.2 - прозрачность)
          'rgba(255, 99, 132, 0.7)',
          'rgba(54, 162, 235, 0.7)',
          'rgba(255, 206, 86, 0.7)',
          'rgba(75, 192, 192, 0.7)'
        ],
        borderColor: [ // Добавляем произвольный цвет обводки
          'rgba(255,99,132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)'
        ],
        borderWidth: 1 // Задаем ширину обводки секций
      }]
    },
    options: {
      responsive: true, // Даем Chart.js указание реагировать правильно.
      maintainAspectRatio: false, // Добавляем эту строку, чтобы избежать переключения на полноразмерный вид (высоту/ширину)
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
          }
        }]
      },
      plugins: {
        datalabels: {
          anchor: 'end',    /* Возможные варианты:
                            'center' (по умолчанию): центр элемента
                            'start': нижняя граница элемента
                            'end': верхняя граница элемента
                            */
          align: 'top',
          formatter: Math.round,
          font: {
            weight: 'bold', // Жирность
            size: '20' // Размер
          }
        }
      }
    }
  });
  return myChart;
}

var table = document.getElementById('dataTable');
var json = []; // Первая строка – это заголовки
var headers =[];
for (var i = 0; i < table.rows[0].cells.length; i++) {
  headers[i] = table.rows[0].cells[i].innerHTML.toLowerCase().replace(/ /gi, '');
}

// Перебор ячеек
for (var i = 1; i < table.rows.length; i++) {
  var tableRow = table.rows[i];
  var rowData = {};
  for (var j = 0; j < tableRow.cells.length; j++) {
    rowData[headers[j]] = tableRow.cells[j].innerHTML;
  }

  json.push(rowData);
}

console.log(json);


// Добавляем JSON-значения в массив меток
var labels = json.map(function (e) {
  return e.имя; // Обязательно маленькими буквами
});
console.log(labels);

// Добавляем JSON-значения в массив значений
var values = json.map(function (e) {
  return e.возраст; // Обязательно маленькими буквами
});
console.log(values);

var chart = BuildChart(labels, values);

В head подключаем библиотеку и в моём примере плагин, для красивого вывода цифр:

Ссылки на библиотеку и плагин:
https://www.chartjs.org/
https://chartjs-plugin-datalabels.netlify.app/