Apex Charts JS 填充到大小

Question

所以我有一个非常小的 div，我必须在其中插入一个小的时间线图表。目前的问题是，由于图表完全居中，我有很多我真的可以使用空格来使实际数据和图表更大。:

我认为显示父级 div 应该无关紧要（因为改变这些大小并不会真正影响图表本身）。感觉配置中缺少某些选项。我试过将 offsetY 甚至 offsetX 设置为负值，因为我很绝望，但无济于事。

<html>
    <div id="chartTarget" style="height: 100; width: 100%;">
        <canvas id="chartCanvas" height="100"></canvas>
        <div style="opacity:0;" class="chartTooltip center">
        </div>
    </div>
</html>

相关代码几乎是从示例中直接复制过来的，但由于我一定会收到有关它的问题，所以这里是：

var options = {
                series: [
                    {
                        name: 'Pending',
                        data: [
                            {
                                x: 'Trip',
                                y: [
                                    new Date('2021-04-21T03:24:00').getTime(),
                                    new Date('2021-04-21T04:24:00').getTime()
                                ]
                            }
                        ]
                    },
                    {
                        name: 'Active',
                        data: [
                            {
                                x: 'Trip',
                                y: [
                                    new Date('2021-04-21T05:24:00').getTime(),
                                    new Date('2021-04-21T08:24:00').getTime()
                                ]
                            }
                        ]
                    },
                    {
                        name: 'Deleted',
                        data: [
                            {
                                x: 'Trip',
                                y: [
                                    new Date('2021-04-21T11:24:00').getTime(),
                                    new Date('2021-04-21T12:24:00').getTime()
                                ]
                            }
                        ]
                    }
                ],
                chart: {
                    height: 75,
                    width: 250,
                    type: 'rangeBar',
                    offsetY: -25,
                    toolbar: {
                        show: false,
                        tools: {
                            download: false,
                            selection: false,
                            zoom: false,
                            zoomin: false,
                            zoomout: false,
                            pan: true,
                            reset: true
                        }
                    },
                    events: {
                        dataPointMouseEnter: function (event, chartContext, config) {
                            config.w.config.chart.toolbar.show = false;
                        },
                        dataPointMouseLeave: function (event, chartContext, config) {
                            config.w.config.chart.toolbar.show = false;
                        }
                    }
                },
                plotOptions: {
                    bar: {
                        horizontal: true,
                        barHeight: '50%',
                        rangeBarGroupRows: true
                    }
                },
                colors: [
                    "#008FFB", "#00E396", "#FEB019", "#FF4560", "#775DD0",
                    "#3F51B5", "#546E7A", "#D4526E", "#8D5B4C", "#F86624",
                    "#D7263D", "#1B998B", "#2E294E", "#F46036", "#E2C044"
                ],
                fill: {
                    type: 'solid'
                },
                xaxis: {
                    type: 'datetime',
                    labels: {
                        maxHeight: 25,
                        style: {
                            fontSize: '9px'
                        },
                        offsetY: -8

                    },
                    tooltip: {
                        enabled: false
                    }
                },
                yaxis: {
                    show: false,
                    lines: {
                        show: true
                    }
                },
                legend: {
                    show: false,
                    position: 'top'
                }
            };

            var chart = new ApexCharts(document.querySelector("#chartTarget"), options);
            chart.render();

我需要标签，所以迷你图之类的东西没用。

Answer 1

图表级别的负偏移似乎已满足我的需要。

chart.offsetY: -25

我假设其他人都可以使用负偏移值，以便进行更精细的调整。

Apex Charts JS 填充到大小

Apex Charts JS fill to size

javascript

apexcharts