如何使用 charts.js 为折线图设置 x 和 y 轴和标题？

Question

This is using charts.js.这是使用 charts.js。 This code only makes the line graph but the title, x axis and y axis does not show.此代码仅制作折线图，但不显示标题、x 轴和 y 轴。 I want to add title, and the names for those 2 axis onto the graph.我想在图表上添加标题和这两个轴的名称。 what is wrong and how do you fix it?出了什么问题，您如何解决？ I also want to make the y axis to start from 0 and up.我还想让 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

the x and y should not be arrays but objects, also the scaleLabel prop is called title now. x 和 y 不应该是数组而是对象，并且scaleLabel道具现在称为title 。 For all the changes please read the migration guide ( https://www.chartjs.org/docs/master/getting-started/v3-migration.html )对于所有更改，请阅读迁移指南 ( https://www.chartjs.org/docs/master/getting-started/v3-migration.html )

Example:例子：

 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