如何從ASP.NET MVC中的控制器傳遞JSON中的chart.js圖表數據對象

Question

根據chart.js文檔，您應該能夠創建一個圖表數據對象，將其填充，然后將其傳遞給圖表對象並進行渲染。 我被卡住了，不確定自己做錯了什么。 數據到達前端，但是不能以chart.js對象想要的方式對其進行格式化。 我已經搜索過，但找不到任何東西。 客戶端沒有拋出任何錯誤，並且我可以在調試器中看到很好的數據。 另外，正如您在本示例中看到的那樣，我也嘗試對數據進行字符串化，但仍然無濟於事。

http://www.chartjs.org/docs/#chart-configuration-chart-data

這是我創建的用於表示文檔說明的簡單類：

public class ChartData
{
    public object[] datasets { get; set; }
    public string[] labels { get; set; }
    public string[] xLabels { get; set; }
    public string[] yLabels { get; set; }
}

這是Controller方法：

public JsonResult GetChartData()
    {
        List<MyClass> myData = db.MyClass
            .Where(o => o.Category == "SomeValue")
            .ToList();

        ChartData cData = new ChartData();
        cData.datasets = new object[2];
        cData.labels = new string[myData.Count];
        string[] ds1 = new string[myData.Count];
        string[] ds2 = new string[myData.Count];

        for (int i = 0; i < myData .Count; i++)
        {
            cData.labels[i] = myData [i].Months;
            ds1[i] = myData[i].SomeCount.ToString();
            ds2[i] = myData[i].AnotherCount.ToString();
        }
        cData.datasets[0] = ds1;
        cData.datasets[1] = ds2;

        return Json(new
        {
            data = cData
        },
            JsonRequestBehavior.AllowGet);

    }

這是客戶端上的javascript，它正在調用控制器並嘗試顯示數據：

function getChartData() {
        $.ajax({
            type: "POST",
            url: "GetChartData",
            data: "{}",
            dataType: "json",
            cache: true,
            success: function (Result) {
                drawChart(JSON.stringify(Result.data));
            },
            error: function (Result) {
                alert("Error");
            }
        });
    }


    function drawChart(data) {

        // render chart
        var ctx = document.getElementById("lineChart").getContext("2d");

        var chartInstance = new Chart(ctx,
        {
            type: 'line',
            data: data,
            options: lineOptions
        });

    };

Answer 1

kblau ...感謝您的協助。 在查看了您的代碼之后，然后在chrome中查看了調試器，問題在於它希望將另一個實例化的對象放置到datasets []對象數組中。 現在是兩個類：

/// <summary>
/// This is a class representation of the data that the ChartJs object will take
/// http://www.chartjs.org/docs/#chart-configuration-chart-data
/// </summary>
public class ChartData
{

    public object[] datasets { get; set; }
    public string[] labels { get; set; }
    public string[] xLabels { get; set; }
    public string[] yLabels { get; set; }



}

/// <summary>
/// This is the instance of the chart data that needs to be placed into the ChartData dataset object array
/// </summary>
public class ChartDataInstance
{
    public int[] data { get; set; }
    public string fillColor { get; set; }
    public string label { get; set; }
    public string pointColor { get; set; }
    public string pointHighlightFill { get; set; }
    public string pointHighlightStroke { get; set; }
    public string pointStrokeColor { get; set; }
    public string strokeColor { get; set; }

}

ChartDataInstance類（是的，我需要一個更好的名稱）是您實例化的副本，將其填充，然后插入到數據集對象數組中。 然后將其傳遞回前端即可。

謝謝！

Answer 2

好的，這就是您的方法。 如果您堅持下去，可以解決您的問題。

視圖：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index59</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var ctx = $("#myChart");

            var lineOptions = {
                responsive: false
            }

            $("#btn").click(function () {
                $.ajax({
                    type: "POST",
                    url: "GetChartData",
                    //data: "{}",
                    dataType: "json",
                    cache: true,
                    success: function (Result) {
                        //drawChart(JSON.stringify(Result.data));
                        var ap = "dh";
                        var chartInstance = new Chart(ctx,
                        {
                            type: 'line',
                            data: Result.data,
                            options: lineOptions
                        });
                    },
                    error: function (Result) {
                        alert("Error");
                    }
                });

            })
        })
    </script>
</head>
<body>
    <div>
        <input type="button" id="btn" value="Go" />
        <canvas id="myChart" width="400" height="400"></canvas>
    </div>
</body>
</html>

控制器/型號：

public class datasets
{
    public string label { get; set; }
    public IList<int> data = new List<int>();
    public string backgroundColor { get; set; }
}

public class data
{
    public data()
    {
        xLabels.Add("x1");
        xLabels.Add("xT");
        xLabels.Add("xW");
        xLabels.Add("xT");
        xLabels.Add("xF");
        xLabels.Add("xS");
        xLabels.Add("xS");
    }

    public IList<string> xLabels = new List<string>();
    public IList<datasets> datasets = new List<datasets>();
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult GetChartData()
    {
        data data = new data();

        datasets dataset = new datasets();
        dataset.label = "apples";
        dataset.data.Add(12);
        dataset.data.Add(19);
        dataset.data.Add(3);
        dataset.data.Add(17);
        dataset.data.Add(6);
        dataset.data.Add(3);
        dataset.data.Add(7);
        dataset.backgroundColor = "rgba(153,255,51,0.4)";

        data.datasets.Add(dataset);

        datasets dataset2 = new datasets();
        dataset2.label = "oranges";
        dataset2.data.Add(2);
        dataset2.data.Add(29);
        dataset2.data.Add(5);
        dataset2.data.Add(5);
        dataset2.data.Add(2);
        dataset2.data.Add(3);
        dataset2.data.Add(10);
        dataset2.backgroundColor = "rgba(255,153,0,0.4)";

        data.datasets.Add(dataset2);

        return Json(new
        {
            data = data
        }
            , @"application/json");
    }

如何從ASP.NET MVC中的控制器傳遞JSON中的chart.js圖表數據對象

問題描述

2 個解決方案

解決方案1
1 2017-04-28 17:31:57

解決方案2
0 2017-04-27 23:05:56

如何從ASP.NET MVC中的控制器傳遞JSON中的chart.js圖表​​數據對象

問題描述

2 個解決方案

解決方案1 1 2017-04-28 17:31:57

解決方案2 0 2017-04-27 23:05:56

如何從ASP.NET MVC中的控制器傳遞JSON中的chart.js圖表數據對象

解決方案1
1 2017-04-28 17:31:57

解決方案2
0 2017-04-27 23:05:56