Не могу создать диаграмму на JSFiddle - PullRequest
Новая
       34

Не могу создать диаграмму на JSFiddle

0 голосов
/ 16 января 2019

Я пытаюсь создать диаграмму Javascript на JsFiddle. Вот мой код. 

$(document).ready(function() {
  var dataPointsA = []
  var dataPointsB = []

  $.ajax({
    type: 'GET',
    url: 'https://api.myjson.com/bins/12qook',
    dataType: 'json',
    success: function(field) {
      for (var i = 0; i < field.length; i++) {
        dataPointsA.push({
          x: field[i].userId,
          y: field[i].numberOfusers
        });
      }

      var chart = new CanvasJS.Chart("chartContainer", {
        title: {
          text: "User Count"
        },

        data: [{
          type: "line",
          name: "line1",
          dataPoints: dataPointsA
        }]
      });

      chart.render();
    }
  });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

Но когда я нажимаю Run, он показывает только это: After run

Я новичок в этом, так что вы можете сказать мне, что не так в моем коде? Спасибо

1 Ответ

0 голосов
/ 16 января 2019

Если вы хотите визуализировать категориальные данные, используйте линейную диаграмму вместо линейной диаграммы, изменив type на column и x на label: 

$.ajax({
  type: 'GET',
  url: 'https://api.myjson.com/bins/12qook',
  dataType: 'json',
  success(data) {
    new CanvasJS.Chart("chartContainer", {
      title: {
        text: "User Count"
      },
      data: [{
        type: "column",
        dataPoints: data.map(
          ({ userId, numberOfusers }) => ({ label: userId, y: numberOfusers })
        )
      }]
    }).render();
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
...