Блог

Главная - Вопросы по программированию - Как задать оси x и y и заголовок для линейной диаграммы с помощью charts.js?

Как задать оси x и y и заголовок для линейной диаграммы с помощью charts.js?

#javascript #chart.js

Вопрос:

Это использование charts.js. Этот код создает только линейный график, но заголовок, оси x и y не отображаются. Я хочу добавить заголовок и имена для этих 2-х осей на график. что не так и как это исправить? Я также хочу, чтобы ось y начиналась с 0 и выше.

 async function chartDisplay() {
      await getData1();
      await getData2();
      const ctx = document.getElementById('chart').getContext('2d');
      const myChart = new Chart(ctx, {
        type: 'line',
        data: {
          labels: xLabels,
          datasets: [{
              data: ratingDataI,
              label: "data1",
              borderColor: "#3E95CD",
              fill: false
            },
            {
              data: ratingDataA,
              label: "data2",
              borderColor: "#3E95CD",
              fill: false
            }
          ]
        },
        options: {
          responsive: true,
          title: {
            display: true,
            text: 'Chart.js Line Chart'
          },
          tooltips: {
            mode: 'label',
          },
          hover: {
            mode: 'nearest',
            intersect: true
          },
          scales: {
            x: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'Dates'
              }
            }],
            y: [{
              display: true,
              scaleLabel: {
                display: true,
                labelString: 'Value'
              }
            }]
          }
        }
      });
    }

Ответ №1:

x и y должны быть не массивами, а объектами, также scaleLabel title теперь называется опора. Для всех изменений, пожалуйста, ознакомьтесь с руководством по миграции (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)

Пример:

 var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true,
        title: {
          display: true,
          text: 'yAxis'
        }
      },
      x: {
        title: {
          display: true,
          text: 'xAxis'
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options); 
 <body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

Комментарии:

1. Как бы вы добавили диапазон к оси y

2. Как указано в документации, вы можете использовать это beginAtZero свойство: chartjs.org/docs/master/axes/cartesian/… , см. обновленный ответ

Метки: