如何使用 charts.js 為折線圖設置 x 和 y 軸和標題？

Question

這是使用 charts.js。 此代碼僅制作折線圖，但不顯示標題、x 軸和 y 軸。 我想在圖表上添加標題和這兩個軸的名稱。 出了什么問題，您如何解決？ 我還想讓 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'
              }
            }]
          }
        }
      });
    }

Answer 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>

如何使用 charts.js 為折線圖設置 x 和 y 軸和標題？

問題描述

1 個解決方案

解決方案1
1 2021-07-14 19:13:58

如何使用 charts.js 為折線圖設置 x 和 y 軸和標題？

問題描述

1 個解決方案

解決方案1 1 2021-07-14 19:13:58

解決方案1
1 2021-07-14 19:13:58