时间戳

首页 > 解决方案 > 如何为chart.js格式化json

javascript - 如何为chart.js格式化json

问题描述

所以，我想从我的控制器输出 json，chart.js 可以读取然后显示为图表。

我在控制器中的查询返回两列（我正在使用 dapper）。第一个将在 x 轴上，下一个将在 y 轴上。这只是一个简单的条形图。

我相信chart.js 需要两个数组，每个轴一个。

就像是。

x[x 轴值]

y[y 轴值]

如何输出chart.js 可以读取的json？我需要为此创建一个视图模型还是可以在控制器内部完成？

我知道如果我创建一个视图模型，然后将其作为列表传递，那么它会将模型输出为 json 对象，但正如我所说，这并不是 chart.js 所期望的格式。

控制器：

public JsonResult count()
    {
        List<string> indexList = new List<string>();
        try
        {
            using (IDbConnection db = new g))
            {
                indexList = db.Query<> blablbka

            }
            return Json(indexList, JsonRequestBehavior.AllowGet);

        }
        catch (Exception)
        {
            throw;
        }


    }

示例 chart.js 标签和数据都通过该查询来自数据库。标签是年份，数据是每个特定年份的事件计数。

<canvas id="myChart" width="400" height="400"></canvas>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["2010", "2011", "2012", "2013", "2014", "2015"],
            datasets: [{
                label: '# of Votes',
                data: [20,10,9,8,5,2],
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                    'rgba(255, 159, 64, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true
                    }
                }]
            }
        }
    });
</script>

谢谢你的帮助。

标签： javascriptc#asp.net-mvc

解决方案

Asp.net 会将给定其 Json 方法的任何对象序列化为 json 字符串，您只需确保序列化的对象与 chart.js 所期望的匹配。

例如，如果我有这样的对象

[Serializable]
public class ChartJsData{
    public string Foo {get;set;}
    public int[] Bar {get;set;}
}

我把它交给 Json 方法

var chartData = new ChartJsData(){
    Foo = "FooVal",
    Bar = new int[]{1,2,3,4,5}
}
return Json(chartData);

然后控制器动作将返回 json 字符串

{ Foo: "FooVal", Bar: [1,2,3,4,5] }

免责声明：我没有运行这个，可能会有一些遗漏的引号或其他东西，但这是一般的想法

推荐阅读