Angular Chart 使用说明（基于angular工程）

  Angular Chart是基于Chart.js的angular组件，引入项目后直接操作数据即可。

  引用方法：

   分别将Chart.js、angular-chart.js、angular-chart.css等文件引入工程（angular工程）中（注意引入顺序）。

   在app.js中引入‘chart.js’。

   创建你的demo的js和html并用路由绑定。

  代码：

   在demo.js中写入以下代码：

  

//Line Chart
    $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
    $scope.series = ['Series A', 'Series B'];

    var dataA = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];
    var dataB = [
      [11, 33, 54, 86, 51, 97, 33],
      [64, 53, 24, 21, 56, 12, 90]
    ];
    $scope.data =dataA;
    $scope.onClick = function (points, evt) {
      $log.debug(points, evt);
    };

    //change data
    $scope.changeData= function () {
      if($scope.data==dataA){
        $scope.data=dataB;
      }else{
        $scope.data=dataA;
      }
      $log.debug('当前的数据更改为：',$scope.data);
    };


    //Bar Chart
    $scope.labelsBar = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
    $scope.seriesBar = ['Series A', 'Series B'];

    $scope.dataBar = [
      [65, 59, 80, 81, 56, 55, 40],
      [28, 48, 40, 19, 86, 27, 90]
    ];


    //Doughnut Chart
    $scope.labelsDoughnut = ["Download Sales", "In-Store Sales", "Mail-Order Sales"];
    $scope.dataDoughnut = [300, 500, 100];


    //Radar Chart
    $scope.labelsRadar =["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"];

    $scope.dataRadar = [
      [65, 59, 90, 81, 56, 55, 40],
      [28, 48, 40, 19, 96, 27, 100]
    ];

    //Pie Chart
    $scope.labelsPie = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
    $scope.dataPie = [300, 500, 100, 40, 120];

    //Dynamic Chart
    $scope.labelsDynamic = ["Download Sales", "In-Store Sales", "Mail-Order Sales", "Tele Sales", "Corporate Sales"];
    $scope.dataDynamic = [300, 500, 100, 40, 120];
    $scope.typeDynamic = 'PolarArea';

    $scope.toggle = function () {
      $scope.typeDynamic = $scope.typeDynamic === 'PolarArea' ?
        'Pie' : 'PolarArea';
    };

   在demo.html中写入以下代码：

 <div style="height:300px;width: 700px;margin-bottom: 140px;">
      <button class="btn btn-primary" ng-click="changeData()">更改数据</button>
      <canvas id="line" class="chart chart-line" chart-data="data"
              chart-labels="labels" chart-legend="true" chart-series="series"
              chart-click="onClick">
      </canvas>
    </div>


    <div style="height:300px;width: 700px;margin-bottom: 140px;">
      <canvas id="bar" class="chart chart-bar"
              chart-data="dataBar" chart-labels="labelsBar" chart-series="seriesBar">
      </canvas>
    </div>

    <div style="height:300px;width: 700px;margin-bottom: 140px;">
      <canvas id="doughnut" class="chart chart-doughnut"
              chart-data="dataDoughnut" chart-labels="labelsDoughnut">
      </canvas>
    </div>

    <div style="height:300px;width: 700px;margin-bottom: 140px;">
      <canvas id="radar" class="chart chart-radar"
              chart-data="dataRadar" chart-labels="labelsRadar">
      </canvas>
    </div>

    <div style="height:300px;width: 700px;margin-bottom: 140px;">
      <canvas id="polar-area" class="chart chart-polar-area"
              chart-data="dataPie" chart-labels="labelsPie">
      </canvas>
    </div>

    <div style="height:300px;width: 700px;margin-bottom: 140px;">
      <button class="btn btn-primary" ng-click="toggle()">toggle</button>
      <canvas id="base" class="chart-base" chart-type="typeDynamic"
              chart-data="dataDynamic" chart-labels="labelsDynamic" chart-legend="true">
      </canvas>
    </div>

 

Chart.js