Question

我正在尝试将json数据绑定到图表。 JSON字符串在服务器端生成。以下是生成的JSON字符串。

{ labels: ["Northern", "South Western", "Western", "North Eastern", "Eastern"], datasets: [{ label: '2016 - 2017', backgroundColor: 'rgba(220, 220, 220, 0.5)', pointBorderColor: '#fff', data: [3762714, 11079381, 6223980, 2253066, 2772093] }, { label: '2016 - 2018', backgroundColor: 'rgba(220, 220, 220, 0.5)', pointBorderColor: '#DEB816', data: [3762714, 11079381, 6223980, 2253066, 2772093] }, ] }

如果我将上面的字符串直接分配给图表数据就可以了！

但是如果我分配了成功函数返回的数据，它就不起作用。

   var fetch_url;
    fetch_url = '../CMSWebParts/VLine/VTell/MapCoords.aspx/LoadBarChart';
    return $.ajax({
        url: fetch_url,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (res, textStatus) {

            var parsedString = JSON.stringify(res.d);

            console.log(res.d);

            //This one works, this is the exact string returned by "res.d"
            var barData = { labels: ["Northern", "South Western", "Western", "North Eastern", "Eastern"], datasets: [{ label: '2016 - 2017', backgroundColor: 'rgba(220, 220, 220, 0.5)', pointBorderColor: '#fff', data: [3762714, 11079381, 6223980, 2253066, 2772093] }, { label: '2016 - 2018', backgroundColor: 'rgba(220, 220, 220, 0.5)', pointBorderColor: '#DEB816', data: [3762714, 11079381, 6223980, 2253066, 2772093] }, ] };

            //This one doesn't work
            //var barData = parsedString;

            var barOptions = {
                responsive: true,
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        }
                    }]
                }

            };


            var ctx2 = document.getElementById("barChart").getContext("2d");
            new Chart(ctx2, { type: 'bar', data: barData, options: barOptions });

        }
    });

Answer 1

从json文件中删除最后一个逗号。

Answer 2

尝试var barData = JSON.parse(parsedString);。您正在为barData分配字符串值，而它正在期待JSON。

Answer 3

使用这一行：

var barData = parsedString;

没有多大意义。您的图表不需要字符串，它需要对象。您只对它进行了字符串化，以便您可以在控制台上阅读它。

new Chart(ctx2, { type: 'bar', data: res.d, options: barOptions });

是您需要做的 - 即将结果对象直接传递给图表。

P.S。由于最后一个逗号，您的问题中显示的JSON无效，但我会假设这是错误的，因为您可能会发布减少的样本？我不希望你的服务器软件产生这样的无效JSON，除非你手动创建（例如使用字符串连接）而不是正确的序列化器。

成功函数返回的Json字符串不起作用，但硬编码工作

3 个答案: