时间戳

首页 > 解决方案 > 如何将外部 JSON 文件中的数据绘制到 chart.js 图表？

javascript - 如何将外部 JSON 文件中的数据绘制到 chart.js 图表？

问题描述

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

我想要：

标签：标签变量数据：数据变量

到目前为止，这是静态数据的设置。

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

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

先感谢您。

标签： javascriptjqueryjsonajax

解决方案

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

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


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


}

推荐阅读