zoukankan      html  css  js  c++  java
  • 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; 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; 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; 700px;margin-bottom: 140px;">
          <canvas id="doughnut" class="chart chart-doughnut"
                  chart-data="dataDoughnut" chart-labels="labelsDoughnut">
          </canvas>
        </div>
    
        <div style="height:300px; 700px;margin-bottom: 140px;">
          <canvas id="radar" class="chart chart-radar"
                  chart-data="dataRadar" chart-labels="labelsRadar">
          </canvas>
        </div>
    
        <div style="height:300px; 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; 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

  • 相关阅读:
    c#可以做什么
    C#是否快被年代所筛选?
    在.NET程序中,C#办法可用来封装代码
    关于程序员的小故事
    码农需了解的代码编写标准
    关于HTML代码的技巧
    分析一波编程语言的前景
    彻底解决Linux索引节点(inode)占用率高的告警
    Python29之字符str与字节bytes
    Python28之文件1
  • 原文地址:https://www.cnblogs.com/golddream/p/5283518.html
Copyright © 2011-2022 走看看