logo标签列表

将JSON加载到Chart.js中

javascriptjqueryjsonajax
3
我希望通过ajax将jsonData加载到chart.js对象中。
我的问题是将jsondata作为字符串引用到chart.js中。
我认为ajax().responseText返回一个字符串，但chart.js数据需要一个数组？
我在使用Google图表时也是这样做的，而且效果非常好。
以下是我的代码：
<html>
    <head>
    <script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="./jslib.js"></script>
    <script type="text/javascript" src="./Chart.min.js"></script>
    </head>

    <body>
        <div class="container">
          <h2>Chart Test</h2>
          <div>
            <canvas id="myChart"></canvas>
          </div>
        </div>
         <script type="text/javascript">
            var jsonData = $.ajax({
                type: "POST",
                data: { "ibrconfig_id": 26}, 
                url: "./ibrlib.php",
                dataType:"json",
                async: false
                }).responseText;   
            //document.write(jsonData);//   this returns: { labels: ["1","2"], datasets: [ { label: "Taster", data: [0,0], backgroundColor: "rgba(153,255,51,0.6)" } ] }    
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, 
            {
                type: 'bar',
                data: jsonData
            });

            /*
            This works very fine
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, 
            {
                type: 'bar',
                data: { labels: ["1","2"], datasets: [ { label: "Taster", data: [0,0], backgroundColor: "rgba(153,255,51,0.6)" } ] }
            }); 
            */      
        </script>
    </body>
</html>

我该如何处理这个问题？非常感谢您的时间！

2个回答
1

好的，我明白了。谢谢andr1o。

我的jsonData有问题。

{ labels: ["1","2"], datasets: [ { label: "Taster", data: [0,0], backgroundColor: "rgba(153,255,51,0.6)" } ] }

不，我已经改变了它。

 { "labels": ["1","2"], "datasets": [ { "label": "Taster", "data": [0,0], "backgroundColor": "rgba(153,255,51,0.6)" } ] }
0
使用 JSON.parse(jsonData) 将 JSON 字符串转化为对象。
无法工作... var objData = JSON.parse(jsonData); type: 'bar', data: objData - Julian
你能展示一下 objData 的内容吗？你可以使用 console.log(objData) 来输出，在 Web Inspector 中查看。 - andr1o
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接