笛卡尔坐标系

遵循笛卡尔网格的坐标轴被称为“笛卡尔坐标系”。笛卡尔坐标系用于折线图、条形图和气泡图。Chart.js 默认包含四种笛卡尔坐标系。

• 线性坐标轴
• 对数坐标轴
• 分类坐标轴
• 时间坐标轴
• 时间序列坐标轴

可视组件

笛卡尔坐标系由可以单独配置的可视组件组成。这些组件是

• 边框
• 网格线
• 刻度
• 刻度标记
• 标题

边框

坐标轴边框绘制在坐标轴的边缘，靠近图表区域。在下图中，它用红色绘制。

const config = { type: 'line', data, options: { scales: { x: { border: { color: 'red' } } } } };

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        border: {
          color: 'red'
        }
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: '我的第一个数据集', backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgb(54, 162, 235)', borderWidth: 1, data: [10, 20, 30, 40, 50, 0, 5], }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 1,
    data: [10, 20, 30, 40, 50, 0, 5],
  }]
};

网格线

坐标轴的网格线绘制在图表区域上。在下图中，它们用红色绘制。

const config = { type: 'line', data, options: { scales: { x: { grid: { color: 'red', borderColor: 'grey', tickColor: 'grey' } } } } };

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          color: 'red',
          borderColor: 'grey',
          tickColor: 'grey'
        }
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: '我的第一个数据集', backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgb(54, 162, 235)', borderWidth: 1, data: [10, 20, 30, 40, 50, 0, 5], }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 1,
    data: [10, 20, 30, 40, 50, 0, 5],
  }]
};

刻度和刻度标记

刻度表示坐标轴上的数据值，以标签的形式显示。刻度标记是网格线从坐标轴边框到标签的延伸。在此示例中，刻度标记用红色绘制，而刻度标签用蓝色绘制。

const config = { type: 'line', data, options: { scales: { x: { grid: { tickColor: 'red' }, ticks: { color: 'blue', } } } } };

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        grid: {
          tickColor: 'red'
        },
        ticks: {
          color: 'blue',
        }
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: '我的第一个数据集', backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgb(54, 162, 235)', borderWidth: 1, data: [10, 20, 30, 40, 50, 0, 5], }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 1,
    data: [10, 20, 30, 40, 50, 0, 5],
  }]
};

标题

坐标轴的标题组件用于标记数据。在以下示例中，它以红色显示。

const config = { type: 'line', data, options: { scales: { x: { title: { color: 'red', display: true, text: '月份' } } } } };

const config = {
  type: 'line',
  data,
  options: {
    scales: {
      x: {
        title: {
          color: 'red',
          display: true,
          text: 'Month'
        }
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: '我的第一个数据集', backgroundColor: 'rgba(54, 162, 235, 0.5)', borderColor: 'rgb(54, 162, 235)', borderWidth: 1, data: [10, 20, 30, 40, 50, 0, 5], }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: 'rgba(54, 162, 235, 0.5)',
    borderColor: 'rgb(54, 162, 235)',
    borderWidth: 1,
    data: [10, 20, 30, 40, 50, 0, 5],
  }]
};

通用配置

注意

这些只是所有笛卡尔坐标系支持的通用选项。有关特定坐标轴的所有可用选项，请参阅特定坐标轴文档。

所有笛卡尔坐标系的通用选项

命名空间：options.scales[scaleId]

名称	类型	默认值	描述
bounds	字符串	'ticks'	确定坐标轴范围。 更多...
clip	布尔值	true	如果为 true，则将数据集绘制裁剪到坐标轴大小，而不是图表区域大小
position	字符串 | 对象		坐标轴的位置。 更多...
stack	字符串		堆叠组。位于同一 position 且具有相同 stack 的坐标轴将被堆叠。
stackWeight	数字	1	坐标轴在堆叠组中的权重。用于确定坐标轴在组内分配的空间量。
axis	字符串		此坐标轴的类型。可能的值为：'x'、'y'。如果未设置，则从 ID 的第一个字符推断，该字符应为 'x' 或 'y'。
offset	布尔值	false	如果为 true，则在两侧添加额外的空间，并且坐标轴将被缩放以适合图表区域。默认情况下，对于条形图，此选项设置为 true。
标题	对象		坐标轴标题配置。 更多...

所有坐标轴的通用选项

命名空间：options.scales[scaleId]

名称	类型	默认值	描述
type	字符串		正在使用的坐标轴类型。自定义坐标轴可以使用字符串键创建和注册。这允许更改图表坐标轴的类型。
alignToPixels	布尔值	false	将像素值对齐到设备像素。
backgroundColor	颜色		坐标轴区域的背景颜色。
边框	对象		边框配置。 更多...
display	布尔值|字符串	true	控制坐标轴的全局可见性（true 时可见，false 时隐藏）。当 display: 'auto' 时，坐标轴仅在至少一个关联的数据集可见时可见。
grid	对象		网格线配置。 更多...
min	数字		用户定义的坐标轴最小值，覆盖数据中的最小值。 更多...
max	数字		用户定义的坐标轴最大值，覆盖数据中的最大值。 更多...
reverse	布尔值	false	反转坐标轴。
stacked	布尔值|字符串	false	数据是否应该被堆叠。 更多...
suggestedMax	数字		在计算最大数据值时使用的调整。 更多...
suggestedMin	数字		在计算最小数据值时使用的调整。 更多...
ticks	对象		刻度配置。 更多...
weight	数字	0	用于对坐标轴进行排序的权重。权重越高，离图表区域越远。

坐标轴位置

坐标轴可以位于图表边缘，位于图表区域的中心，或者相对于数据值动态定位。

要将坐标轴放置在图表边缘，请将 position 选项设置为以下之一：'top'、'left'、'bottom'、'right'。要将坐标轴放置在图表区域的中心，请将 position 选项设置为 'center'。在此模式下，必须指定 axis 选项，或者坐标轴 ID 必须以字母“x”或“y”开头。这样做是为了让 chart.js 知道它是哪种坐标轴（水平或垂直）。要根据数据值对坐标轴进行定位，请将 position 选项设置为类似于以下内容的对象

{
    x: -20
}

这会将坐标轴定位在 ID 为“x”的坐标轴上的 -20 值处。对于笛卡尔坐标系，只能指定 1 个坐标轴。

坐标轴范围

bounds 属性控制坐标轴范围策略（被 min/max 选项绕过）。

• 'data'：确保数据完全可见，外部标签将被移除
• 'ticks'：确保刻度完全可见，外部数据将被截断

刻度配置

注意

这些只是所有笛卡尔坐标系支持的通用刻度选项。有关特定坐标轴的所有可用选项，请参阅特定坐标轴文档。

所有笛卡尔坐标系的通用刻度选项

命名空间：options.scales[scaleId].ticks

名称	类型	默认值	描述
align	字符串	'center'	刻度沿坐标轴的对齐方式。可以是 'start'、'center'、'end' 或 'inner'。inner 对齐方式表示为水平坐标轴的第一个刻度对齐 start，最后一个刻度对齐 end
crossAlign	字符串	'near'	垂直于坐标轴的刻度对齐方式。可以是 'near'、'center' 或 'far'。请参阅 刻度对齐
sampleSize	数字	ticks.length	在决定可以显示多少个标签时要检查的刻度数量。设置较小的值将更快，但在标签长度差异很大时可能不太准确。
autoSkip	布尔值	true	如果为 true，则自动计算可以显示多少个标签，并相应地隐藏标签。在跳过任何标签之前，标签将被旋转到 maxRotation。关闭 autoSkip 以显示所有标签，无论如何。
autoSkipPadding	数字	3	在 autoSkip 启用时，水平坐标轴上刻度之间的填充。
includeBounds	布尔值	true	定义的 min 和 max 值是否应该以刻度的形式呈现，即使它们不是“nice”。
labelOffset	数字	0	以像素为单位，将标签从刻度中心点（对于 x 轴为 x 方向，对于 y 轴为 y 方向）偏移的距离。注意：这可能会导致边缘的标签被画布边缘裁剪
maxRotation	数字	50	当旋转以压缩标签时，刻度标签的最大旋转。注意：旋转只有在必要时才会发生。注意：仅适用于水平坐标轴。
minRotation	数字	0	刻度标签的最小旋转。注意：仅适用于水平坐标轴。
mirror	布尔值	false	围绕坐标轴翻转刻度标签，将标签显示在图表内部而不是外部。注意：仅适用于垂直坐标轴。
padding	数字	0	刻度标签与坐标轴之间的填充。在垂直坐标轴上设置时，这在水平 (X) 方向上应用。在水平坐标轴上设置时，这在垂直 (Y) 方向上应用。
maxTicksLimit	数字	11	要显示的刻度和网格线的最大数量。

所有坐标轴的通用刻度选项

命名空间：options.scales[scaleId].ticks

名称	类型	可脚本化	默认值	描述
backdropColor	颜色	是	'rgba(255, 255, 255, 0.75)'	标签背景的颜色。
backdropPadding	填充		2	标签背景的填充。
callback	函数			返回刻度值在图表上显示的字符串表示形式。参见 回调.
display	布尔值		true	如果为真，则显示刻度标签。
颜色	颜色	是	Chart.defaults.color	刻度的颜色。
字体	字体	是	Chart.defaults.font	参见 字体
主刻度	对象		{}	主刻度配置.
padding	数字		3	设置刻度标签与轴的偏移量
showLabelBackdrop	布尔值	是	径向刻度为 true，否则为 false	如果为真，则在刻度标签后面绘制背景。
textStrokeColor	颜色	是	``	文本周围描边的颜色。
textStrokeWidth	数字	是	0	文本周围描边的宽度。
z	数字		0	刻度层的 z 索引。当刻度绘制在图表区域上时很有用。值 <= 0 绘制在数据集下方，> 0 绘制在上方。

刻度对齐

刻度的对齐方式主要通过刻度配置对象上的两个设置进行控制：align 和 crossAlign。align 设置配置标签沿轴方向与刻度标记的对齐方式（即，水平轴为水平，垂直轴为垂直）。crossAlign 设置配置标签在垂直方向与刻度标记的对齐方式（即，水平轴为垂直，垂直轴为水平）。在下面的示例中，crossAlign 设置用于将 Y 轴上的标签左对齐。

const config = { type: 'bar', data, options: { indexAxis: 'y', scales: { y: { ticks: { crossAlign: 'far', } } } } };

const config = {
  type: 'bar',
  data,
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          crossAlign: 'far',
        }
      }
    }
  }
};

const labels = Utils.months({count: 7}); const data = { labels: labels, datasets: [{ label: 'My First dataset', backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(255, 159, 64, 0.2)', 'rgba(255, 205, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(201, 203, 207, 0.2)' ], borderColor: [ 'rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 255)', 'rgb(201, 203, 207)' ], borderWidth: 1, data: [65, 59, 80, 81, 56, 55, 40], }] };

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [{
    label: 'My First dataset',
    backgroundColor: [
      'rgba(255, 99, 132, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(255, 205, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(201, 203, 207, 0.2)'
    ],
    borderColor: [
      'rgb(255, 99, 132)',
      'rgb(255, 159, 64)',
      'rgb(255, 205, 86)',
      'rgb(75, 192, 192)',
      'rgb(54, 162, 235)',
      'rgb(153, 102, 255)',
      'rgb(201, 203, 207)'
    ],
    borderWidth: 1,
    data: [65, 59, 80, 81, 56, 55, 40],
  }]
};

注意

crossAlign 设置仅在满足以下先决条件时有效

• 刻度旋转为 0
• 轴位置为 'top'、'left'、'bottom' 或 'right'

轴 ID

属性 dataset.xAxisID 或 dataset.yAxisID 必须与 scales 属性匹配。这在使用多轴图表时尤其需要。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // This dataset appears on the first axis
            yAxisID: 'first-y-axis'
        }, {
            // This dataset appears on the second axis
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            'first-y-axis': {
                type: 'linear'
            },
            'second-y-axis': {
                type: 'linear'
            }
        }
    }
});

创建多个轴

对于笛卡尔轴，可以创建多个 X 轴和 Y 轴。为此，您可以将多个配置对象添加到 xAxes 和 yAxes 属性中。在添加新轴时，务必确保指定新轴的类型，因为在这种情况下不使用默认类型。

在下面的示例中，我们创建了两个 Y 轴。然后，我们使用 yAxisID 属性将数据集映射到其正确的轴。

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',
            // This binds the dataset to the left y axis
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',
            // This binds the dataset to the right y axis
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            'left-y-axis': {
                type: 'linear',
                position: 'left'
            },
            'right-y-axis': {
                type: 'linear',
                position: 'right'
            }
        }
    }
});