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 dataset="donutData" options="donutOptions" height="300px"></flot>

如果需要操作统计图的一些默认，可以在angular-flot中修改directive；