Chart.js 2 - Y轴标签

如果您正在使用Chart.js 2制作数据可视化图表，您可能需要自定义Y轴标签。本文将介绍如何在Chart.js 2中自定义Y轴标签。

步骤1：创建一个基本的图表

首先，我们需要创建一个基本的图表并将其呈现在页面上。以下是一个简单的示例，它创建了一个包含两个数据集的柱形图。

var data = {
  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
  datasets: [
    {
      label: 'Dataset 1',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      borderWidth: 1,
      data: [65, 59, 80, 81, 56, 55, 40]
    },
    {
      label: 'Dataset 2',
      backgroundColor: 'rgba(54, 162, 235, 0.2)',
      borderColor: 'rgba(54, 162, 235, 1)',
      borderWidth: 1,
      data: [28, 48, 40, 19, 86, 27, 90]
    }
  ]
};

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      }
    }]
  }
};

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

请注意，我们将options选项对象传递给Chart构造函数，其中包含一个名为scales的对象，该对象具有一个名为yAxes的属性。该属性是一个数组，包含一个Y轴对象和相应的配置选项。在这种情况下，我们将其设置为始于0。

此时，我们的图表应该能够在页面上呈现。

步骤2：配置Y轴标签

要自定义Y轴标签，我们需要修改我们的scales.yAxes对象并添加一个名为scaleLabel的新属性。该属性应该是一个对象，该对象具有一个名为labelString的属性，该属性包含您要为Y轴设置的标签文本。

以下是如何将Y轴标签设置为“销售数量”。

var options = {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true
      },
      scaleLabel: {
        display: true,
        labelString: 'Sales Quantity'
      }
    }]
  }
};

在这个示例中，我们将scales.yAxes[0]对象修改为包含一个名为scaleLabel的新属性。该属性还包含一个名为display的子属性，说明是否应在轴上显示标签，默认情况下将其设置为false。

最重要的是，scaleLabel对象包含一个名为labelString的属性，该属性包含您要为Y轴设置的标签文本。在我们的情况下，我们将其设置为“销售数量”。

注意，您可以通过将display设置为true来显示Y轴标签，但是您没有必要设置一个文本字符串。

步骤3：呈现更新后的图表

我们已经可以自定义Y轴标签了，现在我们只需要呈现更新后的图表。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: options
});

如您所见，我们有一个称为myChart的变量，该变量保存对Chart对象的引用。每当您更改图表的选项或数据时，您将需要重新创建该变量。

现在，我们只需要刷新页面，并且图表在页面上应该可以看到了。