angular-flot学习总结

Posted 2020-06-16

原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-angular-flot/

1.柱状图和折线图的数据格式：

$scope.Chart.data = [ { label: "离线", data: [[0, 2]] }, { label: "在线", data: [[1, 1]] }, { label: "空闲", data: [[2, 1]] } ];

2.饼图和环型图的数据格式：

 $scope.ChartData = [ {label: ‘测试A‘, data: 3}, {label: ‘测试B‘, data: 6}, {label: ‘测试C‘, data: 9} ];

3.仪表盘图（比较特殊，跟其他四个数据格式等有明显的差异）的数据格式：

 $scope.gaugeChart.data = { maxValue: 3000, animationSpeed: 40, val: 1375 };

4.图表中的配置问题：

• tooltip：boolean;  用来控制图表中的小标签是否显示；

• tooltipOpts：{

  content: "%s , amount:%y.0",
  defaultTheme: false

  } 用来控制标签的显示格式及内容，%s为data.label的内容；%y.0为data的数量；

• 配置中的以下这两个对象是用来控制X轴Y轴的一些属性；

  xaxis: {
   show: false
  }, yaxes: { position: "right", tickDecimals: 0 }
  
  show：boolean, 是否显示；
  
  ticks: [[1], [2], [3]], 设置X轴Y轴上刻度；如果只是一个数字，则为将X轴Y轴平分多少份；
  ticks: [[0, "zero"], [1, "在线"], [2, "空闲"], [3, "离线"]]定义了X轴的标注；
  min: -2,max: 3, 设置最小值、最大值；
  tickDecimals: 0, 设置小数点有几位；

•  以日期作为X轴的参数说明：

  xaxis: {
  show: true,
  mode: "time",
  timeformat: "%y/%m/%d"
  },
  $scope.data=[[(new Date(1990, 0, 1)).getTime(), 15],[new Date(‘1990-01-31‘).getTime(),20]]

• 在饼图和环型图上显示标签的设置办法：

  series: {
           pie: {
                 show: true,
                 label: {
                         show: true,
                         radius: 1 / 3,
                         formatter: function (label, series) {
                                    return ‘<div>‘ + label + ‘<br/>‘ + series.data[0][1] + ‘</div>‘;
                         },
                         background: {
                                      opacity: 0.8
                                      }
                         }
                 }
            },

• 在柱状图上显示数量:

  使用flot-barnumbers：详细介绍网址：https://github.com/joetsoi/flot-barnumbers

  1.引入jquery.flot.barnumbers.js

  2.在柱状图的配置中，写入： series: { stack: true, bars: { show: true, numbers: { show: true, yAlign: function (y) { return y + $scope.maxYData * 0.03; }, font: { color: "#000000" } } } }

   

• 多维度统计图：
  

  当是动态获取数据时，会遇到因为是X轴坐标一样而导致多维度的柱子会叠在一起，不是想要的那种挨着的那种效果：可以给X轴坐标加上计算；
  虽然柱子可以挨着，但是两个柱子之间加上点间距会更好看一点：给barData的每一个对象都添加一个bars:{barWidth:值}；