ChartJS不显示来自ASPX的动态数据

时间:2019-02-06 11:05:17

标签: jquery asp.net vb.net charts

实际上,我正在尝试从ChartJS中的mySql数据库中显示一些数据,问题是所有数据均已加载,但图表未显示任何内容。

在控制台或aspx中没有错误,我只是无法理解为什么不显示数据。 即使标签被加载,它们也可见,但图表却不可见。 这是应该有图表的卡片屏幕。

enter image description here

网站位于aspx中,这是获取数据的asp代码:

<WebMethod()>
Public Shared Function GetChart(country As String) As String
    Dim constr As String = ConfigurationManager.ConnectionStrings("myConnectionString").ConnectionString
    Using con As New MySqlConnection(constr)
        Dim query As String = String.Format("select nomeprodotto, quantita from statistica where anno = '{0}' group by nomeprodotto", country)
        Using cmd As New MySqlCommand()
            cmd.CommandText = query
            cmd.CommandType = CommandType.Text
            cmd.Connection = con
            con.Open()
            Using sdr As MySqlDataReader = cmd.ExecuteReader()
                Dim sb As New StringBuilder()
                sb.Append("[")
                While sdr.Read()
                    sb.Append("{")
                    System.Threading.Thread.Sleep(50)
                    Dim color As String = [String].Format("#{0:X6}", New Random().Next(&H1000000))
                    sb.Append(String.Format("text :'{0}', value:{1}, color: '{2}'", sdr(0), sdr(1), color))
                    sb.Append("},")
                End While
                sb = sb.Remove(sb.Length - 1, 1)
                sb.Append("]")
                con.Close()
                Return sb.ToString()
            End Using
        End Using
    End Using
End Function

这是JQuery部分

 $(function () {
        LoadChart();
    });
    function LoadChart() {
        $.ajax({
            type: "POST",
            url: "index.aspx/GetChart",
            data: "{country: '2011'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                $("#dvChart").html("");
                $("#dvLegend").html("");
                var data = eval(r.d);
                var el = document.createElement('canvas');
                $("#dvChart")[0].appendChild(el);

                var ctx = el.getContext('2d');

                var myPieChart = new Chart(ctx, {
                    type: 'pie',
                    data: data
                });

                for (var i = 0; i < data.length; i++) {
                    var div = $("<div />");
                    div.css("margin-bottom", "10px");
                    div.html("<span style = 'display:inline-block;height:10px;width:10px;background-color:" + data[i].color + "'></span> " + data[i].text);
                    $("#dvLegend").append(div);
                }
            },
            failure: function (response) {
                alert('There was an error.');
            }
        });
    }

0 个答案:

没有答案