ASP.NET MVC / ApexCharts: переключение между несколькими графиками нажатием кнопки - PullRequest
Новая
       17

ASP.NET MVC / ApexCharts: переключение между несколькими графиками нажатием кнопки

0 голосов
/ 24 октября 2019

В настоящее время я работаю над панелью управления, которая должна отображать различные данные в виде графиков. Часть данных разделена на три периода: последние 24 часа, последняя неделя (с указанием данных за каждый день недели) и последний месяц.

Проблема: я хочу отобразить эти три разные диаграммы с помощьюнажмите кнопку, чтобы график сразу изменился на график другого периода. Я попытался реализовать это, но 1. единственный график, который показывается кнопками clickclick, - это график с данными прошлой недели, и 2. последний 24-часовой график отображается ниже графика последней недели и сразу же исчезает. Но мне нужно, чтобы графики появлялись на одном месте.

Вот код последнего 24-часового и последнего недельного графика в cshtml-View: 

<div id="chart">

</div>

<script src="https://cdn.jsdelivr.net/npm/apexcharts@latest"></script>

<script>

    function chart_yesterday() {
        var data1_yesterday = @Html.Raw(Json.Serialize(ViewBag.INY));
        var data2_yesterday = @Html.Raw(Json.Serialize(ViewBag.EXY));

        var options = {
            chart: {
                height: 350,
                foreColor: '#fff',
                type: 'bar',
                stacked: true,
                toolbar: {
                    show: true
                },
                zoom: {
                    enabled: true
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            plotOptions: {
                bar: {
                    horizontal: false,
                },
            },
            title: {
                text: 'First Data Set',
                align: 'left',
                style: {
                    fontSize: '12px',
                }
            },
            series: [{
                name: 'Data1',
                data: data1_yesterday
           }, {
                name: 'Data2',
                data: data2_yesterday

            }],
            xaxis: {
                categories: ['Last 24 hours'],
            },
            legend: {
                position: 'right',
                offsetY: 40
            },
            fill: {
                opacity: 1
            },
        }

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

        chart.render();

    }

     var renderButton =
        document.getElementById("Button1");
    renderButton.addEventListener("click", chart_yesterday);
</script>


<script>
    function chart_lastweek() {
        var data1_lastweek = @Html.Raw(Json.Serialize(ViewBag.INLW));
        var data2_lastweek = @Html.Raw(Json.Serialize(ViewBag.EXLW));

        var options = {
            chart: {
                height: 350,
                foreColor: '#fff',
                type: 'bar',
                stacked: true,
                toolbar: {
                    show: true
                },
                zoom: {
                    enabled: true
                }
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    legend: {
                        position: 'bottom',
                        offsetX: -10,
                        offsetY: 0
                    }
                }
            }],
            plotOptions: {
                bar: {
                    horizontal: false,
                },
            },
            title: {
                text: 'First Data Set',
                align: 'left',
                style: {
                    fontSize: '12px',
                }
            },
            series: [{
                name: 'Data1',
                data: data1_lastweek
            }, {
                name: 'Data2',
                data: data2_lastweek

            }],
            xaxis: {
                categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
            },
            legend: {
                position: 'right',
                offsetY: 40
            },
            fill: {
                opacity: 1
            },
        }

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

        chart.render();
    }


    var renderButton =
        document.getElementById("Button2");
    renderButton.addEventListener("click", chart_lastweek);

</script>

Любая помощь будетвысоко ценится!

...