Canvas JS使用ajax调用

Canvas JS using ajax call

本文关键字：调用 ajax 使用 JS Canvas      更新时间：2023-09-26

我正在使用ajax调用来获取数据，以填充canvas js stackedbar图表。但它抛出了一个错误"canvasjs.min.js:102 Uncaught TypeError:无法读取未定义的属性'x'"。下面是我的代码。

      <!DOCTYPE HTML>
      <html>
      <head>  
      <script type="text/javascript" src="/assets/script/jquerymin.js"></script>
      <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        var dps = [{x: 1, y: 10}]; 
        var chart = new CanvasJS.Chart("chartContainer", {
            title:{
                text:"Olympic Medals of all Times (till 2012 Olympics)"             
            },
                        animationEnabled: true,
                        legend: {
                            cursor:"pointer",
                            itemclick : function(e) {
                              if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                  e.dataSeries.visible = false;
                              }
                              else {
                                  e.dataSeries.visible = true;
                              }
                              chart.render();
                            }
                          },
                          axisY: {
                              title: "Medals"
                            },
                            toolTip: {
                              shared: true,  
                              content: function(e){
                                var str = '';
                                var total = 0 ;
                                var str3;
                                var str2 ;
                                for (var i = 0; i < e.entries.length; i++){
                                    console.log(e.entries[i].dataPoint.y);
                                  var  str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ; 
                                  total = e.entries[i].dataPoint.y + total;
                                  str = str.concat(str1);
                                }
                                str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
                                str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";
                                return (str2.concat(str)).concat(str3);
                              }
                            },
            data: [
            {     
                type: "bar",
                showInLegend: true,
                name: "Gold",
                color: "gold",              
                dataPoints:dps[0]
            },
            {     
                type: "bar",
                showInLegend: true,
                name: "Silver",
                color: "silver",                
                dataPoints:dps[1]
            },
            {     
                type: "bar",
                showInLegend: true,
                name: "Bronze",
                color: "#A57164",               
                dataPoints:dps[2]
            }
            ]
            });
        $.ajax({
            url : "stackedcanvas.json",
            success : function(result) {
                var dataFromJSON = JSON.parse(result);
            dps.splice(0, dps.length);
            $.each(dataFromJSON, function (index, value) {
            dps.push(value);
            chart.render();
            });

            }

        });
        });
</script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>
</html>

json文件在这里：

{
"gold": [{
    "y": 198,
    "label": "Italy"
}, {
    "y": 201,
    "label": "China"
}, {
    "y": 202,
    "label": "France"
}, {
    "y": 236,
    "label": "Great Britain"
}, {
    "y": 395,
    "label": "Soviet Union"
}, {
    "y": 957,
    "label": "USA"
}],
"silver": [{
    "y": 166,
    "label": "Italy"
}, {
    "y": 144,
    "label": "China"
}, {
    "y": 223,
    "label": "France"
}, {
    "y": 272,
    "label": "Great Britain"
}, {
    "y": 319,
    "label": "Soviet Union"
}, {
    "y": 759,
    "label": "USA"
}],
"bronze": [{
    "y": 185,
    "label": "Italy"
}, {
    "y": 128,
    "label": "China"
}, {
    "y": 246,
    "label": "France"
}, {
    "y": 272,
    "label": "Great Britain"
}, {
    "y": 296,
    "label": "Soviet Union"
}, {
    "y": 666,
    "label": "USA"
}]
}

我已经验证了Json，它是正确的。它提供的数据格式为[Array[6]、Array[6]、Array[6]。请告诉我问题出在哪里，我做错了什么？

感谢

明白了！必须在ajax调用中制作图表。

<script type="text/javascript">
    $(document).ready(function(){
        var dps = [{x: 1, y: 10}]; 
$.ajax({
            url : "stackedcanvasjson.json",
            success : function(result) {
                var dataFromJSON = JSON.parse(result);
            dps.splice(0, dps.length);
            $.each(dataFromJSON, function (index, value) {
            dps.push(value);
            });
        var chart = new CanvasJS.Chart("chartContainer", {
            title:{
                text:"Olympic Medals of all Times (till 2012 Olympics)"             
            },
                        animationEnabled: true,
                        legend: {
                            cursor:"pointer",
                            itemclick : function(e) {
                              if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                                  e.dataSeries.visible = false;
                              }
                              else {
                                  e.dataSeries.visible = true;
                              }
                              chart.render();
                            }
                          },
                          axisY: {
                              title: "Medals"
                            },
                            toolTip: {
                              shared: true,  
                              content: function(e){
                                var str = '';
                                var total = 0 ;
                                var str3;
                                var str2 ;
                                for (var i = 0; i < e.entries.length; i++){
                                    console.log(e.entries[i].dataPoint.y);
                                  var  str1 = "<span style= 'color:"+e.entries[i].dataSeries.color + "'> " + e.entries[i].dataSeries.name + "</span>: <strong>"+  e.entries[i].dataPoint.y + "</strong> <br/>" ; 
                                  total = e.entries[i].dataPoint.y + total;
                                  str = str.concat(str1);
                                }
                                str2 = "<span style = 'color:DodgerBlue; '><strong>"+e.entries[0].dataPoint.label + "</strong></span><br/>";
                                str3 = "<span style = 'color:Tomato '>Total: </span><strong>" + total + "</strong><br/>";
                                return (str2.concat(str)).concat(str3);
                              }
                            },
            data: [
            {     
                type: "bar",
                showInLegend: true,
                name: "CR",
                color: "#1f77b4",               
                dataPoints:dps[0]
            },
            {     
                type: "bar",
                showInLegend: true,
                name: "TR",
                color: "#2ca02c",               
                dataPoints:dps[1]
            },
            {     
                type: "bar",
                showInLegend: true,
                name: "IR",
                color: "#f52887",               
                dataPoints:dps[2]
            },
            {     
                type: "bar",
                showInLegend: true,
                name: "PTR",
                color: "#5afffa",               
                dataPoints:dps[3]
            },
            {     
                type: "bar",
                showInLegend: true,
                name: "WO",
                color: "#9b14e7",               
                dataPoints:dps[4]
            }
            ]
        });

        chart.render();
            }


});
    });
</script>
相关文章：