在使用Chart.js绘制图表时，我们通常会有这样的需求：从后台方法动态获取图表的数据，而非Demo中使用的静态数据。本文将分享如何使用Ajax动态请求JSON数据并且完成图表的绘制。

• 在html页中添加对Chart.js的引用（下载js文件或者添加CDN引用）

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js

• 使用HTML5<canvas>标签定义一个图形容器，用来绘制图形

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

• 在JS文件中添加 function drawRadarChart()

function drawLineChart@H_404_87@() {

      // 格式化时间数据
      Date.prototype.formatMMDDYYYY = function@H_404_87@() {
          return (this.getMonth() + 1) +
          "/" +  this.getDate() +
          "/" +  this.getFullYear();
      }
      //使用Ajax获取json数据
      var jsonData = $.ajax({
        url: '/mySensor/SensorRecord_getSensorRecord',dataType: 'json',}).done(function @H_404_87@(results) {

        // 将获取到的json数据分别存放到两个数组中
        var labels = [],data=[];
        for(var sensorRecord in results)
        {
            labels.push(new Date(results[sensorRecord].date).formatMMDDYYYY());
            data.push(parseFloat(results[sensorRecord].sensorValue));
        }

        // 设置图表的数据
        var tempData = {
          labels : labels,datasets : [{
              label: "温度",fill: true,lineTension: 0.1,backgroundColor: "rgba(75,192,0.4)",borderColor: "rgba(75,1)",borderCapStyle: 'butt',borderDash: [],borderDashOffset: 0.0,borderJoinStyle: 'miter',pointBorderColor: "rgba(75,pointBackgroundColor: "#fff",pointBorderWidth: 1,pointHoverRadius: 5,pointHoverBackgroundColor: "rgba(75,pointHoverBorderColor: "rgba(220,220,pointHoverBorderWidth: 2,pointRadius: 1,pointHitRadius: 10,data: data,spanGaps: false,}]
        };

        // 获取所选canvas元素的内容
        var ctx = document.getElementById("myChart");
        //设置图表高度
        ctx.height=9;                                  
        // 初始化一个新的雷达图
        var myLineChart = new Chart(ctx,{
            type: 'radar',data: tempData,options: {
                maintainAspectRatio: true,}
        });
      });
    }

• 配置JSON数据源

  json数据是由Struts2 Action返回的一个包含温度数据的List，实体包含以下属性：

private int recordID;
private String sensorID;
private String sensorValue;
private Timestamp date;

• 调用drawLineChart()方法，显示图表：
  
  
  

  加载动态的JSON数据与静态的JSON数据来实现Chart.js本质上没有什么区别，我们需要做的是将获取到的数据格式化填充到Chart.js的datasets中。