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