javascript - 如何从asp.net mvc中的 Controller 传递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，它调用 Controller 并尝试显示数据:

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 类(是的，我需要一个更好的名称)是您实例化副本、填充然后插入数据集对象数组的类。然后将其传递回前端即可。

谢谢!