Невозможно отобразить данные с помощью диаграмм. JS - PullRequest
Новая
       2

Невозможно отобразить данные с помощью диаграмм. JS

1 голос
/ 02 марта 2020

Я использую Графики. JS впервые и столкнулся с проблемой, из-за которой я не могу отобразить данные.

Проще говоря, я возвращаю данные из API, но не могу показать это. Возможно, я делаю что-то не так, но я решил спросить, если у кого-нибудь есть предложение.

Кроме того, я попытался отсканировать StackOverflow перед публикацией этого сообщения. Я не мог найти соответствующий пост. Если вы знаете, пожалуйста, поделитесь им.

Заранее благодарю за помощь. 

function renderChart(data) {
  var ctx = document.getElementById("vitalSignsCanvas").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      datasets: [{
        label: 'This week',
        data: data[0],
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: 'rgba(75, 192, 192, 0.2)',
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
          }
        }]
      },
    }
  });
}

function getVitalSign(memberIDNum, shiftFromDate, shiftToDate, isLive, baseURL) {
  var webMethod = baseURL + "/api/GetVitalSign";
  $.ajax({
    type: "GET",
    url: webMethod,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    data: {
      memberID: memberIDNum,
      fromDate: shiftFromDate,
      toDate: shiftToDate
    },
    success: function(result) {
      var parsedData = JSON.parse(result);

      var data = [];
      data.push(parsedData.Answer);
      renderChart(data);
    },
    error: function(xhr, status) {
      alert("An error occurred. Please contact the Support Team.");
      console.log(xhr.responseText);
      console.log(xhr.status);
    }
  });
}
<div class="modal fade" id="modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-body">
          <h3>Vital Signs for <span class="memberName"></span></h3>
          <br>
          <canvas id="vitalSignsCanvas" width="1000" height="500"></canvas>
        </div>
        <div class="modal-footer-vitalSigns">
          <p>Application &copy; 2020</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

PS: данные являются массивом объектов, т.е.: [{"Question":"Temperature", "QuestionID":30060, "Answer":87.00, "SavedDate": "2020-02-27T10:59:34.27", "PAHID":5}, ...... ]

1 Ответ

1 голос
/ 02 марта 2020
  • Убедитесь, что вы возвращаете response как Object (проверка с использованием console.log(typeof response))
  • Убедитесь, что вы преобразовали свои данные в ожидаемый формат (см. dataToChartData функция, которая принимает массив объектов).
  • Внутри вашего обработчика успеха просто вызовите две строки: 
    myChart.data.datasets[0].data = dataToChartData(result);
    myChart.update();

Пример: 

const config = {
  type: 'line',
  data: {
    datasets: [{
      label: 'This week',
      data: [], // Set initially to empty data
      borderColor: 'rgba(75, 192, 192, 1)',
      backgroundColor: 'rgba(75, 192, 192, 0.2)',
    }]
  },
  options: {
    scales: {
      xAxes: [{
        // https://www.chartjs.org/docs/latest/axes/cartesian/time.html
        type: "time",
        distribution: "linear",
        time: {
          // parser: 'YYYY-MM-DD HH:mm:ss', // Not needed
          unit: 'custom',
          displayFormats: {
            'custom': 'YYYY-MM-DD', // or like: 'YYYY-MM-DD HH:mm:ss',
          }
        },
        ticks: {
          source: 'data'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true,
        }
      }],
      /*title: {
        display: false
      }*/
    }
  }
};

const ctx = document.querySelector("#vitalSignsCanvas").getContext("2d");
const myChart = new Chart(ctx, config);

const dataToChartData = arr => {
  return arr.map(item => {
    return {
      x: item.SavedDate,
      y: item.Answer
    };
  });
};

// Sample result for demo:
const result = [{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 87.00, "SavedDate": "2020-02-14T10:59:34.27Z", "PAHID": 1
  },{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 92.00, "SavedDate": "2020-02-15T10:59:34.45Z", "PAHID": 2
  },{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 64.00, "SavedDate": "2020-02-16T10:59:34.45Z", "PAHID": 3
  },{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 67.00, "SavedDate": "2020-02-17T10:59:34.45Z", "PAHID": 4
  },{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 98.00, "SavedDate": "2020-02-18T10:59:34.45Z", "PAHID": 5
  },{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 77.00, "SavedDate": "2020-02-19T10:59:34.45Z", "PAHID": 6
  },{
    "Question": "Temperature", "QuestionID": 30060, "Answer": 81.00, "SavedDate": "2020-02-20T10:59:34.45Z", "PAHID": 7
  }
];

// This goes inside the Success handler
myChart.data.datasets[0].data = dataToChartData(result);
myChart.update();
#vitalSignsCanvas {display: block; width: 100%; min-height: 200px;}
<h3>Vital Signs for: <span class="memberName">Chart</span></h3>
<canvas id="vitalSignsCanvas"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

Вдохновение кода из мой другой ответ (Как создать линейный график временного ряда в диаграмме js)

...