外部JSONファイルからchart.jsグラフにデータをプロットするにはどうすればよいですか？

debugcn 投稿 Dev

dpericks

chart.jsを使用して外部JSONファイルからデータをグラフ化したいと思います。例として、ここのjsonファイルには、映画（ "title"）と評価（ "rt_score"）がリストされています。.jsファイルに静的JSONを含めずに、各映画とその評価を表示できるようにしたいのですが、$。ajax呼び出しメソッドを使用して/ filmsエンドポイントを参照します。

私が欲しいのは：

ラベル：labelsVariableデータ：dataVariable

これは、静的データを使用したこれまでのセットアップのフィドルです。

これが私のHTMLです：

<body>
  <canvas id="myChart" width="400" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"> 
</script>
</body>

これは、私が望むように棒グラフを正常に生成するjsですが、JSONファイルを参照する代わりに「labels」と「data」に静的データが含まれています。

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
    labels: ['Castle in the Sky', 'Grave of the Fireflies'],
    datasets: [{
        label: 'rating',
        data: [95, 97],
        borderWidth: 1
    }]
},
options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}
});

静的データとラベルを使用する代わりに、$。ajax呼び出しメソッドを使用して外部JSONファイルを参照するにはどうすればよいですか？

私が読んだものに基づいて、「マップ」を使用してオブジェクトをラベルとデータを含む配列に分解する必要があるかもしれませんか？

前もって感謝します。

dpericks

私はそれを考え出した。これがうまくいったことです。.mapを使用して変数内でデータを適切に設定し、それらの変数をデータおよびラベルとして使用する必要がありました。

function renderChart(data, labels) {
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: labels,
        datasets: [{
            label: 'This week',
            data: data,
        }]
    },
});
}
function getChartData() {
$("#loadingMessage").html('<img src="./giphy.gif" alt="" srcset="">');
$.ajax({
    url: "https://ghibliapi.herokuapp.com/films",
    success: function (result) {
        var data = result.map(x=>x.rt_score);
        var labels = result.map(x=>x.title);
        renderChart(data, labels);
        console.log(data);
    },
});

$("#renderBtn").click(
function () {
    getChartData();
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]