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 不应该是数组而是对象，un1 <- unique(dfone$subproduct) for(i in seq_along(un1)) assign(paste0('subprod', i), subset(dfone, subproduct == un1[i])) 属性现在也被称为 scaleLabel。对于所有更改，请阅读迁移指南 (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)

示例：

title

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);

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

1 个答案: