Попытка вызвать API и построить график, но он не показывает - PullRequest
Новая
       6

Попытка вызвать API и построить график, но он не показывает

0 голосов
/ 09 апреля 2020

Я использую Диаграмму. js, чтобы нарисовать простую линейную диаграмму. Все выглядит хорошо, я получаю данные из API, но не могу отобразить на графике: 

$.ajax({
  url: "https://api.thevirustracker.com/free-api?countryTimeline=PK",
  dataType: 'json',
  success: function(result) {
    const datachart = []
    console.log("datachart", datachart)

    for (var i = 0, l = result.timelineitems.length; i < l; i++) {
      const entries = result.timelineitems[i]
      const x = Object.keys(entries);
       const y = Object.values(entries)
      // const y = [2,2,4,7,5,4,7,4,1,0,7,4,8,5,44,1,44,111,44,1,11,1,77,88,55,22,99,66,55,77,44,55,22,00,44,77,8,9,5,7,4,1]

      datachart.push({
        y: y,
        x: x
      })
    }

    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
      // The type of chart we want to create
      type: 'line',

      // The data for our dataset
      data: {
        datasets: [{
          data: datachart,
          label: ["datachart[1]"],
          borderColor: "#18bc9c",
          fill: false
        }]
      },
      // Configuration options go here
      options: {}
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<canvas id="myChart" width="200" height="200"></canvas>

Я хочу добавить массив переменных x в качестве метки, а данные добавить Object.values(entries).new_daily_cases в качестве данных, которые будут показаны

1 Ответ

0 голосов
/ 10 апреля 2020

Свойство data отдельных наборов данных для линейного графика может быть передано в двух форматах: number[] или Point[]. Point[] полезно в следующих случаях:

  1. Если количество точек данных из отдельных наборов данных отличается.
  2. , если значения x точек данных из разных наборов данных различны.

В вашем случае, если вы укажете data.labels, нет необходимости определять data отдельных наборов данных как массив Point.

Пожалуйста, посмотрите на ваш исправленный код ниже: 

$.ajax({
  url: "https://api.thevirustracker.com/free-api?countryTimeline=PK",
  dataType: 'json',
  success: result => {
    const rawData = result.timelineitems[0];
    delete rawData.stat;
    const labels = Object.keys(rawData);
    const data = Object.values(rawData);
    
    var chart = new Chart(document.getElementById('myChart'), {
      type: 'line',
      data: {
        labels: labels,
        datasets: [{
          label: 'New Daily Cases',
          data: data.map(o => o.new_daily_cases),          
          borderColor: "violet",
          fill: false
        },
        {
          label: 'New Daily Deaths',
          data: data.map(o => o.new_daily_deaths),          
          borderColor: "orange",
          fill: false
        },
        {
          label: 'Total Cases',
          data: data.map(o => o.total_cases),          
          borderColor: "blue",
          fill: false
        },
        {
          label: 'Total recoveries',
          data: data.map(o => o.total_recoveries),          
          borderColor: "green",
          fill: false
        },
        {
          label: 'Total Deaths',
          data: data.map(o => o.total_deaths),          
          borderColor: "red",
          fill: false
        }]
      },
      options: {}
    });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>
...