将 json 文件加载到 chartjs

Question

我正在尝试将 json 文件（静态文件）加载到 chartjs。 但它没有返回任何结果。我正在使用 python 生成 json 文件。 我是 jquery 和 javascript 的新手。

这是我的代码的样子。

<!doctype html>
<html>

<head>
    <title>Bar Chart</title>
    <script type="text/javascript" language="javascript" src="static/js/chart-min.js"></script>
    <script type="text/javascript" language="javascript" src="static/js/util.js"></script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>
<body>
<script>
    <div id="container" style="width: 75%;">
        <canvas id="canvas"></canvas>
    </div>

$.getJSON( "var/graph.json", function( data ) {
 var myChart = new Chart(ctx, {
 type: 'bar',
 data: data,
 options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
  }
 });

</script>

</body>

</html>

我的 static json 文件看起来像这样

{
    "test_data": [
        ["aa", "11"],
        ["bb", "123"],
        ["cc", "81"],
        ["dd", "12"],
        ["ee", "22"]
    ]
}

我在这里缺少什么...我需要绘制一个折线图（x 轴 - 名称（aa,bb,cc,dd）y 轴编号（11,123,81,22）感谢您对此的帮助。

Answer 1

$.getJSON("var/graph.json", function(data) {
   var labels = data.test_data.map(function(e) {
      return e[0];
   });
   var data = data.test_data.map(function(e) {
      return e[1];
   });

var ctx = document.getElementById('canvas').getContext('2d');
   var chart = new Chart(ctx, {
      type: 'line',
      data: {
         labels: labels,
         datasets: [{
            backgroundColor: 'rgb(129, 198, 2228)',
            borderColor: 'rgb(0, 150, 215)',
            data: data
         }]
      },
      options: {
         responsive: 'true',
      }
   });
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="canvas" height="80"></canvas>

Answer 2

您需要将data转换为适合线性图表轴的格式。 对于您的折线图，您需要定义数据集的labels和data 。 这可以使用Array.map()方法来完成。

data: {
  labels: data.test_data.map(a => a[0]),
  datasets: [{
      data: data.test_data.map(a => a[1]),
      ...
    }]
  },

请在下面查看您修改后的代码。

 const data = { "test_data": [ ["aa", "11"], ["bb", "123"], ["cc", "81"], ["dd", "12"], ["ee", "22"] ] }; new Chart('canvas', { type: 'line', data: { labels: data.test_data.map(a => a[0]), datasets: [{ label: 'My Dataset', data: data.test_data.map(a => a[1]), fill: false, borderColor: 'red' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }] } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <canvas id="canvas" height="80"></canvas>

将 json 文件加载到 chartjs

问题描述

2 个解决方案

解决方案1
3 已采纳 2020-05-07 10:54:48

解决方案2
1 2020-05-07 04:01:43

将 json 文件加载到 chartjs

问题描述

2 个解决方案

解决方案1 3 已采纳 2020-05-07 10:54:48

解决方案2 1 2020-05-07 04:01:43

解决方案1
3 已采纳 2020-05-07 10:54:48

解决方案2
1 2020-05-07 04:01:43