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

【问题标题】：Cannot create property 'datasets' on string无法在字符串上创建属性“数据集”
【发布时间】：2017-09-22 21:26:41
【问题描述】：

我正在尝试使用 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: Cannot create property 'datasets' on string ' label: [ "1 Empresa","2 Servicio Público","3 Particular" ]，数据集： [{数据：[8,1,1]，背景颜色：[“#41F22B”，“#41F22B”，“#41F22B”]}]' 在 initConfig (Chart.bundle.js:8152)

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

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

【问题讨论】：

标签： jquery asp.net json vb.net chart.js

【解决方案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.');
    }
});
}

【讨论】：