• 第5章 坐标轴

坐标轴是图表的一个组成部分。它们被用来确定如何将数据映射到图表的像素值上。在笛卡尔坐标系的图表中，可以有一个或多个X轴以及1个或多个Y轴将数据点映射到二维的画布上。这类坐标轴被称为“笛卡尔坐标轴”。

在径向图表，比如雷达图，饼状图等，只有一个坐标轴来映射点的坐标和方位。这类坐标轴被称为“径向坐标轴”。

5.1 通用属性

以下属性在Chart.js中的任意坐标轴都是通用的：

5.1.1回调函数对象

有以下几种类型的回调函数可以被用于图表的更新过程中，主要用来改变坐标轴不同点处的参数。

5.1.2 更新坐标轴的默认配置

使用坐标轴服务(Chart.scaleService)可以很方便的更改坐标轴的默认配置。你只需要将部分配置信息传入，这些配置信息将会合并到坐标轴的默认配置并生成新的默认配置。

例如，要将左右的线性坐标轴的最小值设置为0，可以按照如下方式。那么在之后创建的任意线性坐标轴的最小值均为0。

Chart.scaleService.updateScaleDefaults('linear', {
    ticks: {
        min: 0
    }
});

5.1.3 创建新的坐标轴

请参阅第六章二次开发相关的6.5节内容。

5.2 笛卡尔坐标轴

符合笛卡尔网格的坐标轴被称为“笛卡尔坐标轴”。笛卡尔坐标轴可被用于线形图、柱状图和气泡图中。Chart.js默认包含四中类型的笛卡尔坐标轴。

• linear
• logarithmic
• category
• time

5.2.1 笛卡尔坐标轴通用配置

5.2.2 刻度配置

以下配置选项对于所有的笛卡尔坐标轴都是通用的，但不适用于其他坐标轴。

5.2.3 坐标轴ID

属性dataset.xAxisID或dataset.yAxisID必须与坐标系属性scales.xAxes.id或scales.yAxes.id相匹配。这在多坐标系图表中特别有用。

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            yAxisID: 'first-y-axis'
        },{
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            yAxes:[{
                id: 'first-y-axis',
                type: 'linear'
            }, {
                id: 'second-y-axis',
                type: 'linear'
            }]
        }
    }
});

5.2.4 创建多个坐标轴

对于笛卡尔坐标轴，可以创建多个X轴和Y轴。你可以通过在xAxes属性和yAxes属性中添加多个配置对象来实现。在添加新的坐标轴时，很重要的一点时，你所指定的坐标轴类型在此实例中未被使用过。

在下面的案例中个，我们创建了两个Y轴，然后我们使用yAxisID属性将dataset映射到正确的坐标轴上。

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

5.3 笛卡尔坐标轴标签

如果使用全局配置，图表data属性中的labels数组会被绘制。如果只定义了data.labels，则根据此labels数组绘制标签。如果定义了data.xLabels，并且坐标轴为水平坐标轴，则对于此坐标轴会根据xLabels数组绘制标签。如果定义了data.yLabels，并且坐标轴为垂直轴，则对于此坐标轴会根据yLabels数组绘制标签。

5.3.1 坐标轴标签定义

全局定义：

let chart = new Chart(ctx, {
    type: ...,
    data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: ...
    },
});

作为坐标轴定义的一部分：

let chart = new Chart(ctx, {
    type: ...,
    data: ...,
    options: {
        scales: {
            xAxes: [{
                type: 'category',
                labels: ['January', 'February', 'March', 'April', 'May', 'June']
            }]
        }
    }
});

5.3.2 刻度配置选项

如下的配置选项可以用来配置刻度标签。它们存在于ticks属性中。这些选项扩展了通用标签配置选项。

5.3.3 最大最小条目配置

对于min和max属性，它们的值必须位于labels数组中。在下面的例子中，x轴将会显示“March”到“June”:

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [10, 20, 30, 40,50, 60]
        }],
        labels: ['January', 'February', 'March', 'April', 'May', 'June']
    }, 
    options: {
        scales: {
            xAxes: [{
                ticks: {
                    min: 'March'
                }
            }]
        }
    }
});

5.4 线性笛卡尔坐标轴

线性坐标轴可以被置于x坐标轴和y坐标轴上。散点图会自动配置一个线形图来使用这些坐标系的x轴。正如名字所表示的，线性插值会被用来确定某个值在坐标轴上的位置。

5.4.1 线性坐标轴的刻度配置选项

线性坐标系为刻度配置提供了如下的特有选项，它们全部位于ticks属性下，这些选项扩展了通用的刻度配置选项。

5.4.2 坐标轴范围设置

在给定坐标轴数值范围设置时，非常重要的一点是理解它们之间是如何交互的。

suggestedMax属性和suggestedMin属性只会改变用于设置坐标系的数据值。它们在保持自适应行为时时非常有用的。

let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);

在下面的例子中，最大值为50，但实际坐标系的最大值为100。然而，由于data数组中的最小值比suggestedMin属性的值小，因此，suggestedMin属性的值就会被忽略了。

let chart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            label: 'First Dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    suggestedMin: 50,
                    suggestedMax: 100
                }
            }]
        }
    }
});

与suggested*属性相反，min和max属性显式设置了坐标轴的端点。当使用这两个属性时，一些数据点可能会不可见。

5.4.3 步长

如果设置了步长，坐标系的刻度就会根据步长计算每个刻度，相邻两个刻度之间的差值即是步长。如果没有设置步长，则刻度将会使用最佳的数值算法自动确定。

let options = {
    scales: {
        yAxes: [{
            ticks: {
                min: 0,
                max: 5,
                stepSize: 0.5
            }
        }]
    }
};

5.5 对数笛卡尔坐标轴

5.5.1 对数笛卡尔坐标轴的刻度配置选项

对数坐标系为刻度配置提供了如下的特有配置选项。它们全部位于ticks属性内。这些配置选项扩展了通用的刻度配置选项。

5.6 时间笛卡尔坐标轴

时间坐标系用于显示时间和日期。在创建时间坐标系的刻度时，会基于坐标系大小自动计算最合适的单位。

5.6.1 数据集

5.6.1.1 输入数据

在使用时间坐标系时，x轴的数据点可以使用t属性指定：

data: [{
    x: new Date(),
    y: 1
}, {
    t: new Date(),
    y: 10
}]

5.6.1.2 日期格式

在为时间坐标系提供数据时，Chart.js支持Moment.js可以接受到所有格式。详细信息请参阅Moment.js文档。

5.6.2 配置选项

时间坐标系提供了如下配置选项。这些配置选项扩展了通用的刻度配置选项。

5.6.3 时间单位

Chart.js支持如下的时间单位，这些时间单位可以以字符串的形式传递给time.unit属性，从而将时间单位强制限定为指定的单位。

• millisecond
• second
• minute
• hour
• day
• week
• month
• quarter
• year

例如，要创建一个包含以月为单位的时间坐标系的图表，可以使用如下配置：

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                time: {
                    unit: 'month'
                }
            }]
        }
    }
});

5.6.4 显示格式

有如下几种显示格式可被用于配置选项中，它决定了在不同时间单位下坐标轴的刻度显示方式。请参阅moment.js了解允许的格式化字符串。

例如，下面实例将时间单位设置为“quarter”，显示格式设置为显示月和年：

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }
});

5.6.5 数据分布

distribution属性控制着数据在坐标系中的分布方式。

• ‘linear’：数据随时间线性分布
• 'series'：数据等间距分布

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series'
            }]
        }
    }
});

5.6.6 坐标系边界

bounds属性控制着坐标系的边界策略。

• 'data'：确保数据完全可见，位于外部的标签会被移除掉
• 'ticks'：确保刻度完全可见，位于外部的数据会被删掉

5.6.7 刻度来源

ticks.source属性控制了刻度的生成方式

• 'auto'：根据坐标系尺寸和时间选项生成“最优化”的刻度
• 'data'：从data对象（包含labels的data对象）生成刻度
• 'labels'：仅通过用户给定的data.labels值生成刻度

5.6.8 解析器

如果此属性的值为一个字符串，则使用moment.js的解析器处理日期格式。如果属性的值为一个函数，则该函数必须要返回一个moment.js对象。

5.7 极坐标

极坐标主要用于雷达图和饼图中。这类坐标系会覆盖图标区域，而不是位于某一边。Chart.js默认只包含了一种极坐标轴：

• linear

5.7.1 线性极坐标轴

正如其名，线性极坐标系将会使用线性插值的方式来确定数据值相对于坐标轴中心的位置。

线性极坐标系提供了如下的配置选项。

5.7.1.1 配置选项

极坐标系的坐标轴具有ticks、angelLines（从图表中心向外放射的线）、gridLines、pointLabels（雷达图边线的标签）等。

5.7.1.2 刻度配置

线性坐标系提供 如下的配置选项。它们均位于ticks属性内。此外，极坐标轴还支持通用刻度配置选项。

5.7.1.3 坐标轴范围设置

请参阅5.4.2节。

5.7.1.4 步长

请参阅5.4.3节。

5.7.1.5 角线配置选项

以下配置选项用于配置从图表中心放射到四周的角线的相关信息。它们位于angelLines属性下。

5.7.1.6 点标签配置选项

以下配置选项用于配置坐标系周边的点标签显示方式。它们位于pointLabels属性下。注意：以下属性只有在pointLabels.display属性设置为true时才会生效。