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

    @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/
    Ответ написан
    Комментировать