如何在X轴和Y轴上添加轴标签?(Chart.js)

odopli94  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(305)

我有一个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'
                }
            }
        }
    });

如果有人能在我的代码中实现它并将其发送到这里,那就太棒了。
提前感谢!!

esyap4oy

esyap4oy1#

这可以通过下面的options来实现:

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

有关详细信息,请参阅Chart.js文档中的“缩放标题配置”。
请查看修改后的代码,看看它如何处理静态数据。
第一个

相关问题