将过滤器连接到多个图表 asp.net core mvc

Question

我想用一个过滤器控制 3 个图表，页面将包含一个向右浮动的过滤器和三个在左侧的图表，图表位于一个名为 dash.js 的 javascript 文件中，图表是使用 chart.js 制作的。 带有硬编码数据的 javascript 文件中的图表代码

var ctx = document.getElementById("target").getContext('2d');
var myChart = new Chart(ctx, {
    type: "doughnut",
    data: {
        labels: KPINAME,
        datasets: [
            {
                data: kpis,
                label: "Target",
                backgroundColor: barColors,
                fill: false
            }

        ]
    },
    options: {
        maintainAspectRatio: false,

    }
});


//external

var ctx = document.getElementById("external");
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: programs,
        datasets: [
            {

                data: kpi2,
                label: "KPI2",
                backgroundColor: "#3e95cd",
                fill: false
            }
        ]
    }
});

//internal
var ctx = document.getElementById("internal");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: years,
        datasets: [
            {
                data: kpi2forcsc,
                label: "KPI2 OF CSC",
                borderColor: "#3e95cd",
                fill: false
            },
            {
                data: kpi2forit,
                label: "KPI2 OF IT",
                borderColor: "#b91d47",
                fill: false
            }

        ]
    }

索引页上的过滤器代码

<div style="float:right">
    <div class=" navbar-light bg-light text-center" id="sticky-sidebar">
        <div class="sticky-top">
            <!-- Fillter code-->
        
            <!-- just a sample .. later connect with database using C# -->
            <div class="college">
                <label class="small">:choose college</label>
                <select id="College" name="College" class="form-control form-control-sm">
                    <option value="" disabled selected>college</option>
                    @foreach (var x in ViewBag.ListC)
                    {
                        <option value="@x">@x</option>

                    }
                </select>
            </div>

            <!-- connect with database using C# -->
            <div class="department">
                <label class="small">:choose department</label>
                <select id="department" name="department" class="form-control form-control-sm">
                    <option value="" disabled selected>department</option>
                    @foreach (var x in ViewBag.ListD)
                    {
                        <option value="@x">@x</option>
                     
                    }
                </select>

            </div>

            <!-- connect with database using C# -->
            <div class="program">
                <label class="small">:choose a program</label>
                <select id="department" name="department" class="form-control form-control-sm">
                    <option value="" disabled selected>program</option>
                    @foreach (var x in ViewBag.ListP)
                    {
                        <option value="@x">@x</option>
                    }
                </select>
            </div> 

家庭控制器中的代码

public IActionResult Index()
        {
            ViewBag.ListC = _db.Colleges.Select(u => u.CollageName);
            ViewBag.ListD = _db.Departments.Select(u => u.DepartmentName);
            ViewBag.ListP = _db.UniPrograms.Select(u => u.ProgramName);


            return View();
        }

我想知道如何将过滤器与图表相关联，因此过滤器的任何更改都会影响图表

Answer 1

您可以使用 ajax 从动作中获取数据，这是一个演示：

索引视图：

<canvas id="target"></canvas>
@section scripts{ 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="~/js/Dash.js"></script>
}

Dash.js：

function GetData() {
    var resp;
    $.ajax({
        type: "GET",
        url: 'GetData',
        async: false,
        contentType: "application/json",
        success: function (data) {
            resp = data;
        },
        error: function (req, status, error) {
            // do something with error
            alert("error");
        }
    });
    return resp;
}
var simpleData = GetData();
var ctx = document.getElementById("target").getContext('2d');
var myChart = new Chart(ctx, {
    type: "doughnut",
    data: {
        labels: simpleData.labels,
        datasets: [
            {
                data: simpleData.data,
                label: "Target",
                backgroundColor: simpleData.backgroundColor,
                fill: false
            }

        ]
    },
});

行动：

public IActionResult Index()
        {
            ViewBag.ListC = _db.Colleges.Select(u => u.CollageName);
            ViewBag.ListD = _db.Departments.Select(u => u.DepartmentName);
            ViewBag.ListP = _db.UniPrograms.Select(u => u.ProgramName);
            return View();
        }
        public IActionResult GetData()
        {

            return new JsonResult(new { Data = new List<int> { 300, 50, 100 },  Labels= new List<string>{"Red","Green","Blue"}, BackgroundColor = new List<string> { "rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)" } });
        }

结果：