Question

我想使用chart.js从外部JSON文件中绘制数据图表。例如，json文件here列出了电影（“标题”）和评级（“ rt_score”）。我希望能够在不将静态JSON包含在.js文件中的情况下显示每部电影及其分级，而是使用$ .ajax调用方法来引用/ films端点。

我想要：

标签：labelsVariable 数据：dataVariable

Here is a fiddle，其中包含到目前为止的静态数据设置。

这是我的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文件。

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文件，而不是使用静态数据和标签？

根据我的读物，我可能必须使用“地图”将对象分解为包含标签和数据的数组？

谢谢。

Answer 1

动态加载JSON图表数据并在创建图形时进行设置。您可以通过多种方式加载图表json数据。但是，我相信JQuery getJSON函数与您更相关。

$.getJSON( "chartdata/test.json", function( data ) {


 var myChart = new Chart(ctx, {
 type: 'bar',
 data: data,
 options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
  }
 });


}

Answer 2

我认为您正在寻找Ajax请求来填写图表。

function getRandomIntInclusive(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
var ctx_live = document.getElementById("mycanvas");
var myChart = new Chart(ctx_live, {
  type: 'bar',
  data: {
    labels: [],
    datasets: [{
      data: [],
      borderWidth: 1,
      borderColor:'#00c0ef',
      label: 'liveCount',
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: "Chart.js - Dynamically Update Chart Via Ajax Requests",
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }]
    }
  }
});
var postId = 1;
var getData = function() {
  $.ajax({
    url: 'https://jsonplaceholder.typicode.com/posts/' + postId + '/comments',
    success: function(data) {
      myChart.data.labels.push("Post " + postId++);
      myChart.data.datasets[0].data.push(getRandomIntInclusive(1, 25));

      // re-render the chart
      myChart.update();
    }
  });
};
setInterval(getData, 3000);

请参见实时示例here。

Answer 3

我知道了。这是起作用的。我必须使用.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();
});

如何将数据从外部JSON文件绘制到chart.js图？

3 个答案: