Chart.js - установка оси X на основе пользовательского ввода - PullRequest
Новая
       8

Chart.js - установка оси X на основе пользовательского ввода

0 голосов
/ 26 сентября 2019

Я начинающий программист, который только изучает chart.js.Может ли кто-нибудь помочь мне понять, почему мои метки оси X не приспосабливаются к вводу пользователя после нажатия кнопки «Создать график»?Я чувствую, что весь мой код правильный.Вот мой код ниже. 

        <td><input type="number" id="StartFreq"/></td>
          <td><input type="number" id="StopFreq"/></td>
          <td><input type="number" id="XTick"/></td>

        </tr>
      </table>
      <button onclick="generateChart()"><strong>Generate Chart</strong></button>
    </section>

    <br>
    <br>
    <section>
      <canvas id="myChart"></canvas>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.js"></script>
      <script>
      let StartFreq = document.getElementById('StartFreq');
      let StopFreq = document.getElementById('StopFreq');
      let XTick = document.getElementById('XTick');
      let ctx = document.getElementById('myChart').getContext('2d');

      function generateLabels(){
        let xvals = [];
        for (let i = 0; i < 14; i++) {
          xvals.push(parseFloat(StartFreq.value) + parseFloat(XTick.value) * i )
        }
        return xvals

      }

      let chart = new Chart(ctx, {

      // The type of chart we want to create
      type: 'line',

      // The data for our dataset
      data: {
      labels: generateLabels(),
      datasets: [{
      label: 'R-TE10',
      data: [0, 10, 5, 2, 20, 30, 45]
      }]
      },

      // Configuration options go here
      options: {
        scales : {
          xAxes:[{
            ticks: {
              beginAtZero: true
            }
          }],
          yAxes : [{
            ticks : {
              beginAtZero : true,
              min : 0,
              max: 10
            }
          }]
        }

      }
      });
      function generateChart() {
        generateLabels();
        chart.update()
      }
      </script>
    </section>

Для пояснения, я хочу, чтобы StartFreq был в тике в самой нижней левой части графика, а мой нижний правый тик - это Stop Freq.Я хочу, чтобы каждый тик был равномерно распределен, и каждый тик стоил входное значение Xtick.Я хочу, чтобы диаграмма обновлялась, когда я нажимаю кнопку «Создать диаграмму».

1 Ответ

0 голосов
/ 26 сентября 2019

Ваша ошибка в следующем

Для обновления опций поддерживается изменение свойства опций на месте или передача нового объекта опций.

из Chart.js

Чтобы обновление работало, вам нужно изменить исходный объект, который вы не делаете.

просто исправьте это, выполнив это 

function generateChart() {
  generateLabels();
  chart.data.labels = generateLabels();
  chart.update();
}

Демонстрация

Или, лучше, создавать / показывать диаграмму только при нажатии кнопки «Генерировать».

...