将 x 轴限制在 Apexcharts.js

Question

我想限制我正在使用的条形图中的 x 轴，我有多个值，但我只想显示 7，然后用户可以滚动查看其余值。这个选项存在吗？

Answer 1

设置 xaxis.range 属性的值应该有所帮助。

var options = {
    series: [
        {
            name: 'PRODUCT A',
            data: [44, 55, 41, 67, 22, 43, 13, 23, 20, 8, 13, 27]
        }, {
            name: 'PRODUCT B',
            data: [13, 23, 20, 8, 13, 27, 11, 17, 15, 15, 21, 14]
        }, {
            name: 'PRODUCT C',
            data: [11, 17, 15, 15, 21, 14, 44, 55, 41, 67, 22, 43]
        }
    ],
    chart: {
        type: 'bar',
        height: 350,
        stacked: true,
        toolbar: {
          show: true
        }
    },
    xaxis: {
        range: 7
    }
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();

将 x 轴限制在 Apexcharts.js

Limit x-axis in Apexcharts.js

javascript

html

jquery

css

apexcharts