无法通过Charts.JS显示数据

Question

我是第一次使用Charts.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/[email protected]"></script>

PS：数据为对象数组，即：[{"Question":"Temperature", "QuestionID":30060, "Answer":87.00, "SavedDate": "2020-02-27T10:59:34.27", "PAHID":5}, ...... ]

Answer 1

• 确保您以[[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',
          unit: 'minute',
          displayFormats: {
            'minute': 'YYYY-MM-DD', // '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/[email protected]"></script>
my other answer (How to create a time series line graph in Chart js)的代码启示