ApexCharts 中两个 rangeBar 图表的组合，但画笔图表不起作用

Question

我想创建两个具有相同类型“rangeBar”的图表，第二个图表应该是第一个图表的缩影。但滑块不起作用。在第一个图表中我也无法推动。我想尝试一下没有框架。 实际上，apexcharts 中有一些代码示例，例如在此链接中https://apexcharts.com/javascript-chart-demos/area-charts/github-style/

这是我尝试过的代码：

        var chartSeries = [{
            name: "Perfusor",
            data: [{
                x: 'RASS Score 4stdl.',
                y: [new Date('27 Jul 2017 10:00:00').getTime(), new Date('27 Jul 2017 12:00:00').getTime()]
            },
            {
                x: 'RASS Score 4stdl.',
                y: [new Date('28 Jul 2017 10:00:00').getTime(), new Date('29 Jul 2017 12:00:00').getTime()]
            },
            ...            
            ]
        },
        {
            name: "Einzelspritze",
            data: [{
                x: 'Metoprolol p. o. 47.5 mg',
                y: [new Date('01 Aug 2017 14:00:00').getTime(), new Date('01 Aug 2017 14:00:00').getTime()]
            },
            {
                x: 'Metoprolol p. o. 47.5 mg',
                y: [new Date('01 Aug 2017 15:00:00').getTime(), new Date('01 Aug 2017 15:00:00').getTime()]
            },
            ...
            ]      
        }];

        var chartOptions = {
            series: chartSeries,
            chart: {
                id: 'chart2',
                type: 'rangeBar',
                toolbar: {
                    autoSelected: 'pan',
                    show: false
                },   
            },
            plotOptions: {
                bar: {
                    horizontal: true,
                    barHeight: '80%' 
                }
            },

            fill: { 
                opacity: 1               
            },
            stroke: {
                colors: ['#D7263D'],
                width: 1.5
            },
            xaxis: {
                type: 'datetime',
                position: 'top',
                min: new Date('25 Jul 2017 10:00:00').getTime(),            
                max: new Date('01 Sep 2017 23:59:00').getTime(),
                labels: {
                    datetimeFormatter: {
                        hour: 'dd.MM\nHH:mm'
                    }
                },
                tickPlacement: 'on'
            }
        };

        var chart = new ApexCharts(document.querySelector("#timelineChart"), chartOptions);
        chart.render();

        // Brush chart, Miniatur
        var brushOptions = {
            series:  chartSeries,
            chart: {
                id: 'chart1',
                type: 'rangeBar',
                height: 200,
                toolbar: {
                    autoSelected: 'selection',
                },
                brush:{
                    target: 'chart2',
                    enabled: true,
                    autoScaleYaxis: true
                },
                selection: {
                    enabled: true,
                    xaxis: {
                        min: new Date('01 Sep 2017 00:00:00').getTime(),
                        max: new Date('02 Sep 2017 00:00:00').getTime()
                    },
                },
            },
            dataLabels: {
                enabled: false
            },
            plotOptions: {
                bar: {
                    horizontal: true,
                    barHeight: '50%' 
                }
            },
            legend: {
                show: false,
            },
            xaxis: {
                type: 'datetime',
                min: new Date('25 Jul 2017 10:00:00').getTime(),            
                max: new Date('01 Sep 2017 23:59:00').getTime(),
                tooltip: {
                    enabled: false
                },
                labels: {
                    datetimeFormatter: {
                        month: "dd.MMM.yy",
                    }
                }

            },
            yaxis: {
                labels: {
                    show: false
                } 
            }
        };

        var chart2= new ApexCharts(document.querySelector("#brushChart"), brushOptions);
        chart2.render();

Answer 1

我刚刚遇到了同样的问题。浏览器控制台显示 apexcharts 代码中的 JS 错误。我刚刚实施了一个修复（在我的项目中运行良好），并且我打开了一个拉取请求： https://github.com/apexcharts/apexcharts.js/pull/4071