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.统计图显示方式：

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

转载于:https://www.cnblogs.com/maoyazhi/p/5684886.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！