Question

我正在使用Charts.js。当我想使用来自我的.net代码的数据时，我遇到了一个问题。

   <WebMethod()>
Public Shared Function GetChart() As String

    Dim sData As String = ""
    Dim sColor As String = ""
    Dim sLabel As String = ""


    '.... reading my db stuff ....

    Dim sReturn As String = ""
    sReturn = sReturn & " labels: [ "
    sReturn = sReturn & sLabel.Remove(sLabel.Length - 1, 1)
    sReturn = sReturn & " ], "

    sReturn = sReturn & " datasets: [{   data: ["
    sReturn = sReturn & sData.Remove(sData.Length - 1, 1)
    sReturn = sReturn & " ], "
    sReturn = sReturn & "  backgroundColor: [ "
    sReturn = sReturn & sColor.Remove(sColor.Length - 1, 1)
    sReturn = sReturn & " ] "
    sReturn = sReturn & " }] "

    Return sReturn

End Function

使用此

时在客户端

<script type="text/javascript">
$(function () {
LoadChart();

});
function LoadChart() {

    var ctx = document.getElementById("chart-area").getContext('2d');


 $.ajax({
    type: "POST",
    url: "_TempEntrada.aspx/GetChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
       var config = {
            type: 'doughnut',
            data: r.d,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Doughnut Chart'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        var myDoughnutChart = new Chart(ctx, config);



    },
    failure: function (response) {
        alert('There was an error.');
    }
});
}
</script>

我收到此错误：Chart.bundle.js：8152 Uncaught TypeError：无法在字符串'标签上创建属性'datasets'：[“1 Empresa”，“2ServicioPúblico”，“3 Particular”]，数据集： [{data：[8,1,1]，backgroundColor：[“＃41F22B”，“＃41F22B”，“＃41F22B”]}]' 在initConfig（Chart.bundle.js：8152）

通过我从服务器获取的数据更改“data：r.d”，它工作正常。我尝试使用或不使用{}返回，但它没有任何区别

data: {labels: ["1 Empresa", "2 Servicio Público", "3 Particular"], datasets: [{ data: [8, 1, 1], backgroundColor: ["#8215C8", "#8215C8", "#8215C8"] }] },

Answer 1

我修复了我的问题

以下是新的服务器代码：

<WebMethod()>
Public Shared Function GetChart() As List(Of Object)

    Dim iData As New List(Of Integer)()
    Dim sColor As New List(Of String)()
    Dim sLabel As New List(Of String)()
    Dim chartData As New List(Of Object)()

    Dim objConn As New SqlConnection(ConfigurationManager.ConnectionStrings("conProcase").ToString)
    objConn.Open()

    Try

       '... my db stuff

        Do While objRdr.Read()
            iData.Add(Convert.ToInt32(objRdr("iCount")))
            sColor.Add([String].Format("#{0:X6}", New Random().Next(&H1000000)))
            sLabel.Add(objRdr("Co_Desc"))

        Loop

        objRdr.Close()


    Catch ex As Exception


    Finally

        If Not IsNothing(objConn) Then
            objConn.Close()
            objConn = Nothing
        End If

    End Try

    chartData.Add(iData)
    chartData.Add(sColor)
    chartData.Add(sLabel)

    Return chartData


End Function

jquery方面：

 function LoadChart() {

    var ctx = document.getElementById("chart-area").getContext('2d');


 $.ajax({
    type: "POST",
    url: "_TempEntrada.aspx/GetChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (r) {
            var sData =
            {
                labels: r.d[2] ,
                datasets: [
                    {
                        backgroundColor: r.d[1],
                        data: r.d[0] 
                    },

                ]
            };

        var config = {
            type: 'doughnut',
            data:sData,
            options: {
                responsive: true,
                legend: {
                    position: 'top',
                },
                title: {
                    display: true,
                    text: 'Chart.js Doughnut Chart'
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                }
            }
        };

        var myDoughnutChart = new Chart(ctx, config);



    },
    failure: function (response) {
        alert('There was an error.');
    }
});
}

无法在字符串上创建属性“数据集”

1 个答案: