1.6.1 笛卡尔坐标(cartesian

优质

小牛编辑

129浏览

2023-12-01

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

所有包含笛卡尔轴的图表都支持多种通用选项。

名称	类型	描述
`type`	`String`	图表类型
`position`	`String`	轴在图表中的位置。可用的值有: `'top'`, `'left'`, `'bottom'`, `'right'`
`id`	`String`	连接数据集和刻度轴的 ID 更多...
`gridLines`	`Object`	网格线配置更多...
`scaleLabel`	`Object`	刻度文字选项更多...
`ticks`	`Object`	刻度配置更多...

坐标轴刻度选项

以下选项对于所有直角坐标轴是通用的，但不适用于其他坐标轴。

名称	类型	默认值	描述
`autoSkip`	`Boolean`	`true`	如果为 true，则自动计算可以显示的标签数量并相应地隐藏其他标签。为 false 则任何时候都显示所有的标签。
`autoSkipPadding`	`Number`	`0`	启用`autoSkip`时，在水平轴上的刻度之间进行填充。注意: 仅适用于水平刻度
`labelOffset`	`Number`	`0`	以像素为单位，用于从标记的中心点（x轴的y方向和y轴的x方向）偏移标签。注意: 这可能会导致边缘的标签被canvas边缘裁剪掉
`maxRotation`	`Number`	`90`	刻度标签的最大旋转角度。注意: 必要时才会发生旋转注意: 仅适用于水平刻度
`minRotation`	`Number`	`0`	刻度标签的最小旋转。注意：仅适用于水平刻度
`mirror`	`Boolean`	`false`	翻转坐标轴上的刻度标签，在图表内显示标签而不是外部。注意：仅适用于垂直刻度
`padding`	`Number`	`10`	在刻度标签和坐标轴之间填充。注意：仅适用于水平刻度

坐标轴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"
                }
            ]
        }
    }
});

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

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

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',

            // 将数据集绑定到左侧的y轴
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // 将数据及绑定到右侧的y轴
            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'
            }]
        }
    }
});