Javascript 如何从asp.net mvc中的控制器传递json格式的chart.js图表数据对象_Javascript_Asp.net_Json_Asp.net Mvc_Chart.js

Javascript 如何从asp.net mvc中的控制器传递json格式的chart.js图表数据对象

javascript asp.net json asp.net-mvc chart.js

Javascript 如何从asp.net mvc中的控制器传递json格式的chart.js图表数据对象,javascript,asp.net,json,asp.net-mvc,chart.js,Javascript,Asp.net,Json,Asp.net Mvc,Chart.js,根据chart.js文档，您应该能够创建图表数据对象，填充它，并将其传递给图表对象并进行渲染。我被卡住了，不知道我做错了什么。数据正在到达前端，但是不能按照chart.js对象所需的方式格式化数据。我已经搜索过了，在这上面找不到任何东西。客户端没有抛出错误，我可以在调试器中很好地看到数据。此外，正如您在本例中看到的，我也尝试过对数据进行字符串化，但仍然没有效果这是我创建的一个简单类，用于表示文档中说明的内容： public class ChartData { public objec

根据chart.js文档，您应该能够创建图表数据对象，填充它，并将其传递给图表对象并进行渲染。我被卡住了，不知道我做错了什么。数据正在到达前端，但是不能按照chart.js对象所需的方式格式化数据。我已经搜索过了，在这上面找不到任何东西。客户端没有抛出错误，我可以在调试器中很好地看到数据。此外，正如您在本例中看到的，我也尝试过对数据进行字符串化，但仍然没有效果

这是我创建的一个简单类，用于表示文档中说明的内容：

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

以下是控制器方法：

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);

    }

好吧，这就是你能做到的。如果你坚持下去，你就能解决你的问题

视图：

@{
布局=空；
}
索引59
$（函数（）{
var ctx=$（“我的图表”）；
变量行选项={
回答：错
}
$（“#btn”）。单击（函数（）{
$.ajax({
类型：“POST”，
url:“GetChartData”，
//数据：“{}”，
数据类型：“json”，
是的，
成功：功能（结果）{
//drawChart（JSON.stringify（Result.data））；
var ap=“dh”；
var chartInstance=新图表（ctx，
{
键入：“行”，
数据：Result.data，
选项：线条选项
});
},
错误：函数（结果）{
警报（“错误”）；
}
});
})
})

控制器/型号：

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");
    }

公共类数据集
{
公共字符串标签{get；set；}
公共IList数据=新列表（）；
公共字符串背景颜色{get；set；}
}
公共类数据
{
公共数据（）
{
xLabels.添加（“x1”）；
xLabels.添加（“xT”）；
xLabels.添加（“xW”）；
xLabels.添加（“xT”）；
xLabels.Add（“xF”）；
xLabels.Add（“xS”）；
xLabels.Add（“xS”）；
}
public IList xLabels=新列表（）；
公共IList数据集=新列表（）；
}
公共类HomeController:控制器
{
[HttpPost]
公共操作结果GetChartData（）
{
数据=新数据（）；
数据集数据集=新数据集（）；
dataset.label=“苹果”；
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（153255,51,0.4）”；
data.datasets.Add（数据集）；
datasets dataset2=新数据集（）；
dataset2.label=“橙子”；
数据集2.data.Add（2）；
数据集2.data.Add（29）；
数据集2.data.Add（5）；
数据集2.data.Add（5）；
数据集2.data.Add（2）；
数据集2.data.Add（3）；
数据集2.data.Add（10）；
dataset2.backgroundColor=“rgba（255153,0,0.4）”；
data.datasets.Add（dataset2）；
返回Json（新的
{
数据=数据
}
，@“应用程序/json”）；
}

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; }

}

//
///这是ChartJs对象将获取的数据的类表示
/// http://www.chartjs.org/docs/#chart-配置图数据
/// 
公共类图表数据
{
公共对象[]数据集{get；set；}
公共字符串[]标签{get；set；}
公共字符串[]xLabels{get；set；}
公共字符串[]yLabels{get；set；}
}
/// 
///这是需要放置到ChartData数据集对象数组中的图表数据的实例
/// 
公共类ChartDataInstance
{
公共int[]数据{get；set；}
公共字符串fillColor{get；set；}
公共字符串标签{get；set；}
公共字符串pointColor{get；set；}
公共字符串pointHighlightFill{get；set；}
公共字符串pointHighlightStroke{get；set；}
公共字符串pointStrokeColor{get；set；}
公共字符串strokeColor{get；set；}
}

ChartDataInstance类（是的，我需要一个更好的名称）是您正在实例化的一个副本，填充，然后插入到数据集对象数组中。将其传递回前端即可

谢谢

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");
    }

/// <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; }

}