如何在 x 轴和 y 轴上添加轴标签？ （图表.js）

Question

我有一个 chart.js 正在运行，但我真的想在轴上添加轴名称，但不知道如何。 我能得到一些帮助吗？

我试图通过搜索来弄清楚，但找不到任何可以很好地解释它的东西。

我想得到什么：

我的图表代码：

    const ctx = document.getElementById('chart').getContext('2d');
    window.myChart = new Chart(ctx,{ // having the "myChart" as a window. insted of const was sugested by someone on StackOverflow (makes the const global, i can therefor use it in another function)
        type: 'line',
        data: {
            labels: arrayTheta,
            datasets: [{
                //label: graphLabels,
                data: arrayRangeArray[0],
                backgroundColor: 'rgba(255, 99, 132, 0.2)',

                borderColor: 'rgba(255, 99, 132, 1)',
                pointRadius: 0,
                tension: 0.4  //The line "tension: 0.4" makes the graph a little bit smoother (might remove later)
            },
            {
              //label: graphLabels,
              data: arrayRangeArray[1],
              backgroundColor: 'blue, 0.2',

              borderColor: 'blue',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[2],
              backgroundColor: 'pink, 0.2',

              borderColor: 'pink',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[3],
              backgroundColor: 'orange, 0.2',

              borderColor: 'orange',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[4],
              backgroundColor: 'yellow, 0.2',

              borderColor: 'yellow',
              pointRadius: 0,
              tension: 0.4

            },
            {
              //label: graphLabels,
              data: arrayRangeArray[5],
              backgroundColor: 'black, 0.2',

              borderColor: 'black',
              pointRadius: 0,
              tension: 0.4

            }],
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true
                }
                ,x: {
                  display: true,
                  type: 'linear'
                }
            }
        }
    });

如果有人可以将它实现到我的代码中并将其发送到这里，那就太棒了。

提前致谢！！

Answer 1

这可以通过以下options来完成：

options: {
  scales: {
    y: {
      beginAtZero: true,
      title: {
        display: true,
        text: 'Y-Axis Label'
      }
    },
    x: {
      title: {
        display: true,
        text: 'X-Axis Label'
      }
    }
  }
}

有关详细信息，请参阅Chart.js文档中的Scale Title Configuration 。

请查看您修改后的代码，看看它如何与 static 数据一起使用。

 new Chart('chart', { type: 'line', data: { labels: ['A', 'B','C','D','E'], datasets: [{ label: 'Dataset 1', data: [8, 7, 5, 6, 2], backgroundColor: 'rgba(255, 99, 132, 0.2)', borderColor: 'rgba(255, 99, 132, 1)', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 2', data: [2, 4, 2, 4, 7], backgroundColor: 'blue, 0.2', borderColor: 'blue', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 3', data: [5, 8, 7, 6, 2], backgroundColor: 'pink, 0.2', borderColor: 'pink', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 4', data: [8, 7, 5, 6, 2], backgroundColor: 'orange, 0.2', borderColor: 'orange', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 5', data: [5, 3, 2, 4, 1], backgroundColor: 'yellow, 0.2', borderColor: 'yellow', pointRadius: 0, tension: 0.4 }, { label: 'Dataset 6', data: [5, 6, 2, 8, 7], backgroundColor: 'black, 0.2', borderColor: 'black', pointRadius: 0, tension: 0.4 } ], }, options: { scales: { y: { beginAtZero: true, title: { display: true, text: 'Y-Axis Label' } }, x: { title: { display: true, text: 'X-Axis Label' } } } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script> <canvas id="chart" height="110"></canvas>