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>

我的静态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转换为适合linear chart axis的格式。对于折线图，您需要定义数据集的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文件加载到chart.js

2 个答案: