在Chart.js中设置2个y轴标题(和/或标签),可以通过以下步骤实现:
var options = {
scales: {
yAxes: [{
id: 'y-axis-1',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: '左侧Y轴标题'
}
}, {
id: 'y-axis-2',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: '右侧Y轴标题'
}
}]
}
};
在这个例子中,我们定义了两个y轴,一个位于左侧('y-axis-1'),一个位于右侧('y-axis-2')。每个y轴都有一个标题,可以通过scaleLabel
属性来设置。
var data = {
datasets: [{
label: '数据集1',
yAxisID: 'y-axis-1',
// 其他数据配置...
}, {
label: '数据集2',
yAxisID: 'y-axis-2',
// 其他数据配置...
}]
};
在这个例子中,我们为每个数据集指定了要使用的y轴。'y-axis-1'对应左侧y轴,'y-axis-2'对应右侧y轴。
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
在这个例子中,我们使用了一个折线图('line')作为示例,你可以根据自己的需求选择其他类型的图表。
这样,你就成功地在Chart.js上设置了2个y轴标题(和/或标签)。根据你的实际需求,可以进一步调整配置对象和数据对象来满足特定的要求。
关于Chart.js的更多信息和详细配置,请参考腾讯云的Chart.js产品介绍链接地址:Chart.js产品介绍
领取专属 10元无门槛券
手把手带您无忧上云