在 ApexCharts 中,可以通过设置 options
对象中的 zoom
属性来限制缩小的范围。
下面是一个示例代码:
var options = {
chart: {
zoom: {
enabled: true,
type: 'xy', // 可以设置为 'x' 或 'y' 以限制在 X 轴或 Y 轴上缩小
autoScaleYaxis: true, // 设置为 true 以自动缩放 Y 轴
zoomedArea: {
fill: {
color: '#90CAF9',
opacity: 0.4
},
stroke: {
color: '#0D47A1',
opacity: 0.4,
width: 1
}
}
}
},
xaxis: {
type: 'datetime'
},
yaxis: {
min: 0,
max: 100
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
在上面的示例中,我们设置了 zoom
属性为 enabled: true
,这样就启用了缩放功能。type
属性设置为 'xy',表示可以同时在 X 轴和 Y 轴上缩放,如果想要只在 X 轴或 Y 轴上缩放,可以将其设置为 'x' 或 'y'。autoScaleYaxis
属性设置为 true
,表示自动缩放 Y 轴。
zoomedArea
属性用于设置缩放区域的样式。在上面的示例中,我们设置了填充颜色为 '#90CAF9',透明度为 0.4,边框颜色为 '#0D47A1',透明度为 0.4,宽度为 1。
xaxis
和 yaxis
属性用于设置坐标轴的类型和范围。在上面的示例中,我们设置了 xaxis
的类型为 'datetime',表示 X 轴是一个日期时间轴,yaxis
的范围为 0 到 100。
通过以上设置,我们可以限制缩小的范围。