ChartJS 的条形图不呈现

Question

我无法显示来自 ASP.NET-MVC-5 应用程序的条形图。我亲眼目睹了 JSON 正确输出（下面应用了示例），并且根据文档我已经包含了所有内容，但输出如下：

HTML:

<div class="jumbotron">
    <h1>Another Chart</h1>
    <canvas id="barChartLoc" width="600" height="400"></canvas>
</div>

这是调用控制器的脚本，returns一个JSON:

<script type="text/javascript">
function chartFYRevenue() {
        $.ajax({
            url: '@Url.Action("GetLast5FYRevenueAnalysis", "Utility")',
            cache: true
        })
        .done(function (data) {
            var mybarChartLoc = new Chart(document.getElementById("barChartLoc").getContext("2d")).Bar(data);
        })
        .fail(function () {
            alert("Ajax failed to fetch data");
        });
    }

 $(document).ready(function () {
        //auto load on page load
        chartFYRevenue();
});
</script>

这是 returns 一个 JSON 的控制器。我已经测试过了，这里也很好：

public JsonResult GetLast5FYRevenueAnalysis()
        {
            Models.Chart.BarChartDBContext chartDB = new Models.Chart.BarChartDBContext();

            return Json(chartDB.Test, JsonRequestBehavior.AllowGet);
        }

这是我动态构建图表数据的建模器 class：

public class ChartDataSets
    {
        public string label { get; set; }
        public string fillColor { get; set; }
        public string highlightFill { get; set; }
        public string highlightStroke { get; set; }
        public string strokeColor { get; set; }
        public string data { get; set; }
    }

    public class BarChartModel
    {
        public string labels { get; set; }
        public List<ChartDataSets> datasets { get; set; }
    }

    public class BarChartDBContext : Models.DBHelper.DBHelperClass
    {
        public BarChartModel GetLast5FInancialYearRevenue
        {
            get { return getLast5FinancialYearRevenue(); }
        }

        public BarChartModel Test
        {
            get { return test(); }
        }

        private BarChartModel test()
        {
            List<ChartDataSets> _datasets = new List<ChartDataSets>();
            BarChartModel _barChartModel = null;

            _datasets.Add(new ChartDataSets()
            {
                data = string.Format("[{0}]", "10,5,25,35"),
                fillColor = "rgba(220,220,220,0.5)",
                highlightFill = "rgba(220,220,220,0.75)",
                highlightStroke = "rgba(220,220,220,1)",
                strokeColor = "rgba(220,220,220,0.8)",
                label = "s1"
            });

            _barChartModel = new BarChartModel();
            _barChartModel.labels = string.Format("[{0}]", "c1,c2,c3,c4");
            _barChartModel.datasets = _datasets;

            return _barChartModel;
        }
}

JSON 数据样本：

{
    "labels": "[c1,c2,c3,c4]",
    "datasets": [
        {

            "label": "s1",
            "fillColor": "rgba(220,220,220,0.5)",
            "highlightFill": "rgba(220,220,220,0.75)",
            "highlightStroke": "rgba(220,220,220,1)",
            "strokeColor": "rgba(220,220,220,0.8)",
            "data": "[10,5,25,35]"
        }
    ] 
}

更新：

我将我的 ChartDataSet 和 BarChartModel Class 修改为以下内容：

public class ChartDataSets
    {
        public string label { get; set; }
        public string fillColor { get; set; }
        public string highlightFill { get; set; }
        public string highlightStroke { get; set; }
        public string strokeColor { get; set; }
        public string[] data { get; set; }
    }

    public class BarChartModel
    {
        public string[] labels { get; set; }
        public List<ChartDataSets> datasets { get; set; }
    }

Answer 1

您生成的 JSON 数据不正确。正确的输出应该是

"{
    "labels": ["c1","c2","c3","c4"],
    "datasets": [
        {
            "label":"s1",
            "fillColor":"rgba(220,220,220,0.5)",
            "highlightFill":"rgba(220,220,220,0.75)",
            "highlightStroke":"rgba(220,220,220,1)",
            "strokeColor":"rgba(220,220,220,0.8)",
            "data":[10,5,25,35]
        }
    ]
}"

ChartJS 的条形图不呈现

Bar Chart of ChartJS does not Render

ajax

json

asp.net-mvc-5

chart.js