Question

我对此非常陌生，本周我们将了解有关画布的Chartjs和一些关于JSON的内容。我们需要对json文件使用Ajax HTTP GET请求，但老实说我不知道如何调用函数来放置数据并显示饼图和条形图。如果有人可以提供帮助，那就太好了。

HTML代码

<canvas id="pieChart" width="400" height="400"></canvas>

    <!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/Chart.js"></script>
<script src="js/js.js"></script>

JS

    $(function () { 
    getPieChartData(); 
}); 


function getPieChartData() { 
    $.get( 
        'http://localhost:8888/r_tomino_assignment6/data/piechart-data.json', 
        function (data) { 
            displayPieChart(data) 
        }, 
        'json' 
        ); 
} 

var context = document.getElementById("pieChart").getContext("2d");   
var myPieChart = new Chart(context).Pie(data);

JSON数据

    [
    {
        "color": "#F7464A",
        "highlight": "#FF5A5E",
        "label": "Red",
        "value": 300
    },
    {
        "color": "#46BFBD",
        "highlight": "#5AD3D1",
        "label": "Green",
        "value": 50
    },
    {
        "color": "#FDB45C",
        "highlight": "#FFC870",
        "label": "Yellow",
        "value": 100
    }
];

Answer 1

您的displayPieChart功能是否被调用？看起来你没有在任何地方定义它。由于该AJAX请求是异步的，因此您需要为其提供回调函数。您现在需要另一个名为displayPieChart的函数，该函数需要data并创建图表。

然后该函数需要继续并调用以下行

var context = document.getElementById("pieChart").getContext("2d");   
var myPieChart = new Chart(context).Pie(data);

例如

function displayPieChart(data) {
    var context = document.getElementById("pieChart").getContext("2d");   
    var myPieChart = new Chart(context).Pie(data);
}

哪能查看您的数据。

Chartjs的饼图 - JSON Ajax HTTP GET请求？

1 个答案: