如何显示选定的图形？

Question

I have a chart with dropdown like this and I want to go to the selected chart.

这里是我可以选择和编码的地方：

<div class="widget widget-chart-one">
    <div class="widget-heading">
        <h5 class="">Total Coins</h5>

        <div class="task-action">
            <div class="dropdown">
                <a class="dropdown-toggle" href="#" role="button" id="pendingTask" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-horizontal">
                        <circle cx="12" cy="12" r="1"></circle>
                        <circle cx="19" cy="12" r="1"></circle>
                        <circle cx="5" cy="12" r="1"></circle>
                    </svg>
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="pendingTask" style="will-change: transform;">
                    <a class="dropdown-item" href="javascript:void(0)" onclick="">Weekly</a>
                    <a class="dropdown-item" href="javascript:void(0)" onclick="">Monthly</a>

                </div>
            </div>
        </div>
    </div>

    <div class="widget-content">
        <div id="coin"></div>
    </div>
</div>

这是图形代码。此图表是为图表 1 编写的。如果从下拉项目部分选择 Weekly，我希望显示 var options2，如果选择 Monthly，我希望显示 var options2。

try {
    var options = {
        chart: {
            fontFamily: 'Nunito, sans-serif',
            height: 365,
            type: 'area',
            zoom: {
                enabled: false
            },

            dropShadow: {
                enabled: true,
                opacity: 0.3,
                blur: 5,
                left: -7,
                top: 22
            },

            toolbar: {
                show: false
            },

            series: [
                {
                    name: 'Total Pay',
                    data: {!!$totalpaysdiamonds!!}
                },
                {
                    name: 'Google Pay',
                    data: {!!$googlepaysdiamonds!!}
            
                }, 
                {
                    name: 'Huawei Pay',
                    data: {!!$huaweipaysdiamonds!!}
                }, 
                {
                    name: 'Iap Pay',
                    data: {!!$iappaysdiamonds!!}
                },
            ],

            labels: {!!$dates1!!},
            
            xaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    show: true
                },
                labels: {
                    offsetX: 0,
                    offsetY: 5,
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Nunito, sans-serif',
                        cssClass: 'apexcharts-xaxis-title',
                    },
                }
            },
            
            yaxis: {
                labels: {
                    formatter: function(value, index) {
                        return (value / 1000) + 'K'
                    },
                    offsetX: -22,
                    offsetY: 0,
                    style: {
                        fontSize: '12px',
                        fontFamily: 'Nunito, sans-serif',
                        cssClass: 'apexcharts-yaxis-title',
                    },
                }
            },
          
            responsive: [{
                breakpoint: 575,
                options: {
                    legend: {
                        offsetY: -30,
                    },
                },
            }]
        }

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

        chart.render();

    } 
    
    catch (e) {
        console.log(e);
    }
}

Answer 1

第一种方式是点击后更新图表https://apexcharts.com/docs/methods/#updateOptions

第二种解决方案，渲染所有图表并用css

隐藏它们

.chart-hidden{
  opacity:0;
  pointer-events:none;
  position:absolute;
  top:0
}

Add/remove 这个 class 到 hide/show 图表

<div id="chart1"></div>
<div id="chart2" class="chart-hidden"></div>
<div id="chart3" class="chart-hidden"></div>

如何显示选定的图形？

How can I show the selected graph?

javascript

apexcharts