Question

我目前正致力于数据可视化。我正在尝试做的是从sql-database中获取一些数据并将其可视化。但是，当我试图再次渲染图表时，它会给出一个空白图表。我正在使用下拉菜单，我有区域。图表应呈现所选选项。

我正在使用ajax获取该数据。

这是我的代码： AJAX＆amp; JS。

var datpoint = [];

$(document).ready(function () {
     $("#form-control").change(function () {
        var id = $('#form-control').val().toString();
        //alert(id);
        var serviceURL2 = '/Home/jsonSukupuol';

        $.ajax({
            type: "GET",
            url: serviceURL2,
            data: { a: id },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: successFuncSuk,
            error: errorFunc
        });

    function successFuncSuk(data, status) {
        datpoint = data;
        //alert(datpoint);
        chart.options.data[0].dataPoints = datpoint;
        chart.render();
        //window.onload();
    }

    function errorFunc() {
        alert('error');
        }
    });
});

var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",
            animationEnabled: true,
            title: {
                text: "example chart"
            },
            subtitles: [
                { text: "Try Resizing the Browser" }
            ],
            data: [
                {
                    type: "pie", 
                    dataPoints: @Html.Raw(ViewBag.DataPoints),
                }
            ]
        });

window.onload = function () {
        chart.render();
    }

控制器：

public ActionResult jsonSukupuol(string a)
    {
        List<DataPoint> dataPoints = Kortit(a);
        var datPoin = JsonConvert.SerializeObject(dataPoints);
        return Json(datPoin, JsonRequestBehavior.AllowGet);
    }

我得到了正确的数据，我可以看到当我使用警报时。但是，此图表只是呈现空白图表。

这是我第一次使用viewbag在第一次渲染时得到的结果。

这是我在再次渲染数据时得到的结果（ajax数据）。

修改我试图获取信息的console.log（JSON.stringify（数据））; 在successFuncSuk。

结果：“[{\”label \“：\”Mies \“，\”y \“：547892}，{\”label \“：\”Nainen \“，\”y \“：491164} ]”。还有一些错误：TypeError：l.dataPoints [t] .x未定义

Answer 1

顺便说一下，非常感谢，不记得使用那个console.log！所以我用Google搜索了TypeError。正确的解决方案是：

function successFuncSuk(data, status) { 
    var finals = []; var tabData = JSON.parse(data); 
    for (var i = 0; i < tabData.length; i++) { 
        finals.push({ 'label': tabData[i].label, 'y': tabData[i].y}); 
    } 
    chart.options.data[0].dataPoints = finals; chart.render(); 
}

现在它有效。我只需要再次解析这些数据。

Canvas.js不会动态呈现图表

1 个答案: