angularJS圖表-angular-flot

1.首先需要在項目中引入的js文件有

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>

<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js"></script>

<script src="../angular-flot.js"></script>

2.餅圖的數據結構以及配置：

  // 餅圖-環形圖數據源
    $scope.donutData = [
      {
        label: "本台資源",
        data: 0
      }, {
        label: "外台資源",
        data: 0
      }, {
        label: "其他資源",
        data: 0
      }
    ];
    $scope.donutOptions = {
      series: {
        pie: {
          show: true,
          innerRadius: 0.5,
          label: {
            show: false
          }
        }
      },
      legend: {
        show: false,
        noColumns: 1
      },
      grid: {
        clickable: true
      },
      colors: ["#15bec0", "#967db0", "#fcb981"]
    };

3.折線圖的數據結構以及配置：

$scope.chartData = [
  {
    label: "流量大小",
    data: [[1,3],[2,4]]
  }, {
    label: "入庫數量",
    data: [[3,4],[1,5]]
  }, {
    label: "視頻總長度",
    data: [[1,6],[3,5]]
  }
];

 $scope.chartOptions = {
      series: {
        zero: false,
        bars: {
          show: false
        },
        lines: {
          show: true,
          fill: false
        },
        points: {
          show: true,
          lineWidth: 1,
          fill: true,
          fillColor: "#ffffff",
          symbol: "circle",
          radius: 5
        },
        shadowSize: 0
      },
      legend: {
        show: false,
        noColumns: 8
      },
      grid: {
        clickable: true,
        borderWidth: 1,
        borderColor: "#eeeeee"
      },
      colors: ["#15bec0", "#b5a2de", "#fcb981"],
      xaxis: {
        show: true,
        ticks: [],
        tickDecimals: 0
      },
      yaxis: {show: true, tickDecimals: 0}
    };

4.餅圖數據源：

// 餅圖
$scopr.pieData=[
    {label: '已完成', data: 23},
    {label: '未完成', data: 77}
]

$scope.pieChartOptions = {
　　series: {
   　　pie: {
      　　show: true,
       　 label: {
          show: false,
              radius: 1 / 3
          }
       }
    },
    legend: {
       show: false,
       noColumns: 2
    },
    colors: ['#fe8203', '#e7e9ed']
};　　

5.統計圖顯示方式：<flot style="margin: 0 auto" dataset="donutData" options="donutOptions" height="300px"></flot>

如果需要操作統計圖的一些默認，可以在angular-flot中修改directive；