java - ApexCharts Vue - 热图图表 - 缩放时间线

Question

有没有办法在 ApexCharts (VueJS) 的热图图表中提供缩放功能

<VueApexCharts v-bind:style="{ 'box-shadow':'0px 0px 2.3px 0px'}" width="350" height="220" type=heatmap :options="chartOptionsNew" :series="dataSeries"></VueApexCharts>

我能够放大和缩小 x 轴，但 y 轴值没有反映。

chartOptionsNew: {
            chart: {
                stacked: false,
                zoom: {
                type: 'x',
                enabled: true,
                autoScaleYaxis: false,
                toolbar: {
                  autoSelected: 'zoom',
                  tools: { download: true, selection: true, zoom: true, zoomin: true, zoomout: true, pan: true, reset: true },
                }
              },
            }

这在 ApexCharts 的热图图表中是否可行？

提前致谢！

Answer 1

将缩放类型设置为“xy”

chartOptionsNew: {
    chart: {
        stacked: false,
        zoom: {
            type: 'xy', <--- this line
            enabled: true,
            autoScaleYaxis: false,
            toolbar: {
                autoSelected: 'zoom',
                tools: {
                    download: true,
                    selection: true,
                    zoom: true,
                    zoomin: true,
                    zoomout: true,
                    pan: true,
                    reset: true
                },
            }
        },
    }

注意：缩放将不会为类别轴启用，但仅适用于具有数字轴的图表。例如，时间线图。