在Plotly.js中手动设置x轴和y轴是数据可视化的核心操作,涉及坐标轴范围、刻度、标签等配置。以下是完整的说明:
Plotly.js通过layout
对象控制坐标轴属性,主要配置项包括:
const layout = {
xaxis: {
range: [0, 10], // 设置x轴范围为0到10
title: '时间(秒)'
},
yaxis: {
range: [-5, 5], // 设置y轴范围为-5到5
title: '数值'
}
};
Plotly.newPlot('myDiv', data, layout);
xaxis: {
tickvals: [1, 2, 3], // 刻度位置
ticktext: ['一', '二', '三'], // 显示标签
tickangle: 45 // 标签旋转45度
}
yaxis: {
type: 'log', // 对数轴
gridcolor: '#ddd', // 网格线颜色
zeroline: false // 隐藏零线
}
xaxis2
, yaxis2
)。autorange
为true
。tickangle
或减少刻度密度:tickangle
或减少刻度密度:domain
和anchor
属性:domain
和anchor
属性:range: ['2023-01-01', '2023-12-31']
)。ticktext
替换数字标签(如产品名称)。const data = [{
x: [1, 2, 3],
y: [4, 5, 6],
type: 'scatter'
}];
const layout = {
xaxis: {
range: [0, 5],
title: 'X轴',
tickvals: [1, 2, 3],
ticktext: ['低', '中', '高']
},
yaxis: {
range: [0, 10],
title: 'Y轴',
type: 'linear',
gridwidth: 2
}
};
Plotly.newPlot('myDiv', data, layout);
通过以上配置,可完全掌控坐标轴的显示效果。
没有搜到相关的文章