Проблема в построении графика Chart.js

Question

Пытаюсь построить график:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
react_sulf
</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

    
</head>
<body>


    
       
       
        <div class="container">
            
  <h1>График</h1>
  
  
    <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <style>
    canvas{
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
    <br>
    <br>
    
    <script>
        
        var config = {
            type: 'line',
            data: {
                labels: [],
                datasets: [{
                    label: 'Кривая разгонки (расч.)',
                    backgroundColor: window.chartColors.red,
                    borderColor: window.chartColors.red,
                    data: [
                        
                           {x: 0.002, y: 151.06230562587638},            
                        
                           {x: 0.004, y: 155.5012177944128},            
                        
                           {x: 0.006, y: 158.83726653724102},            
                        
                           {x: 0.008, y: 161.6013296661564},            
                        
                           {x: 0.01, y: 164.00004687628052},            
                        
                           {x: 0.012, y: 166.13966452854999},            
                        
                           {x: 0.014, y: 168.08338574264758},            
                        
                           {x: 0.016, y: 169.87241965963335},            
                        
                           {x: 0.018, y: 171.5353969008441},            
                        
                           {x: 0.02, y: 173.09316109455227},            
                        
                           {x: 0.022, y: 174.5614419084098},            
                        
                           {x: 0.024, y: 175.95245300912427},            
                        
                           {x: 0.026, y: 177.2759004458906},           
                        
                           {x: 0.994, y: 376.9124029590279},            
                        
                           {x: 0.996, y: 379.62260281049976},            
                        
                           {x: 0.998, y: 383.2050994588201},            
                        
                    
                      
                        
                    ],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                title: {
                    display: true,
                    text: 'Фракционная разгонка'
                },
                tooltips: {
                    mode: 'index',
                    intersect: false,
                },
                hover: {
                    mode: 'nearest',
                    intersect: true
                },
                scales: {
                    xAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Доля отгона'
                        }
                    }],
                    yAxes: [{
                        display: true,
                        scaleLabel: {
                            display: true,
                            labelString: 'Температура, С'
                        }
                    }]
                }
            }
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myLine = new Chart(ctx, config);
        };


    </script>


        </div>
    

</body>
</html>

Строятся только 2 первых точки, что я делаю не так? Это только часть проблемы. Затем мне надо построить 2 графика по разным наборам точек.

Answer 1

Я не знаю, почему Вы решили, что массив меток (labels) можно оставлять пустым. Это как раз дискретные шаги по X на графике, а data - значения на этих шагах.

Как я понимаю, chart.js не принимает данные в объектах (во всяком случае, я не нашёл такой информации), потому необходимо их разбить на отдельные массивы и подставить в нужные поля config-а.

Исправления минимальны, комментарии в коде:

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>
    react_sulf
  </title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <h1>График</h1>
    <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <style>
      canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
      }
    </style>
    <div style="width:95%;">
      <canvas id="canvas"></canvas>
    </div>
    <br>
    <br>
    <script>
      // Массивы для параметров
      var aData = [],
        aLabels = [],
        aSource = [{
          x: 0.002,
          y: 151.06230562587638
        }, {
          x: 0.004,
          y: 155.5012177944128
        }, {
          x: 0.006,
          y: 158.83726653724102
        }, {
          x: 0.008,
          y: 161.6013296661564
        }, {
          x: 0.01,
          y: 164.00004687628052
        }, {
          x: 0.012,
          y: 166.13966452854999
        }, {
          x: 0.014,
          y: 168.08338574264758
        }, {
          x: 0.016,
          y: 169.87241965963335
        }, {
          x: 0.018,
          y: 171.5353969008441
        }, {
          x: 0.02,
          y: 173.09316109455227
        }, {
          x: 0.022,
          y: 174.5614419084098
        }, {
          x: 0.024,
          y: 175.95245300912427
        }, {
          x: 0.026,
          y: 177.2759004458906
        }, {
          x: 0.994,
          y: 376.9124029590279
        }, {
          x: 0.996,
          y: 379.62260281049976
        }, {
          x: 0.998,
          y: 383.2050994588201
        }];
      // Распределяем по отдельным массивам
      aSource.forEach((el) => {
        aLabels.push(el.x);
        aData.push(el.y)
      });
      // Подставляем массивы в нужные поля
      var config = {
        type: 'line',
        data: {
          labels: aLabels,
          datasets: [{
            label: 'Кривая разгонки (расч.)',
            backgroundColor: window.chartColors.red,
            borderColor: window.chartColors.red,
            data: aData,
            fill: false,
          }]
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: 'Фракционная разгонка'
          },
          tooltips: {
            mode: 'index',
            intersect: false,
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          scales: {
            xAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'Доля отгона'
              }
            }],
            yAxes: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'Температура, С'
              }
            }]
          }
        }
      };
      window.onload = function() {
        var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
      };
    </script>
  </div>
</body>

</html>

БЛОГ НА HUSL

Проблема в построении графика Chart.js

Ответы (1 шт):