如何将外部JSON文件中的数据绘制到chart.js图中？
如何将外部JSON文件中的数据绘制到chart.js图中？
提问于 2019-05-20 14:10:46
我想使用chart.js从外部JSON文件中绘制数据图表。例如，json文件here列出了电影("title")和分级("rt_score")。我希望能够显示每部电影及其分级，而不是在.js文件中包含静态JSON，而是使用$.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成功地生成了我想要的条形图，但是在"labels“和" data”中使用了静态数据，而不是引用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文件，而不是使用静态数据和标签？
根据我所读到的内容，我可能必须使用"map“将对象分解为包含标签和数据的数组？
提前谢谢你。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-05-21 23:40:56
我想通了。以下是有效的方法。我必须使用.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();
});Stack Overflow用户
发布于 2019-05-20 14:26:18
动态加载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
}
}]
}
}
});
}Stack Overflow用户
发布于 2019-05-20 14:30:03
我认为您正在寻找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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56215179
复制相关文章
相似问题
腾讯云开发者
