Angular-flot Study Summary

Original address: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/learn-angular-flot/
1. Data formats for histogram and line charts:

$scope. Chart.data = [{label: "Offline", data: [[0, 2]}, {label: "Online", Data: [[1, 1]}, {label: "Idle", Data: [[[2, 1]]}];

2. Data formats for pie charts and ring charts:

$scope. ChartData = [{label: ' Test A ', Data:3}, {label: ' Test B ', data:6}, {label: ' Test C ', data:9}];

3. The data format of the dashboard chart (which is more special, with significant differences from the other four data formats):

$scope. Gaugechart.data = {maxvalue:3000, animationspeed:40, val:1375};

4. Configuration issues in the diagram:

• tooltip:boolean;   is used to control whether small labels in the chart are displayed; 

• tooltipopts:{

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

  }  is used to control the display format and contents of the label,%s is the content of Data.label;%y.0 is the number of data; 

• xaxis: { show: false}, yaxes: { position:  "Right",  tickDecimals:  0 }show:boolean,  whether to display;ticks: [[1], [2], [3]],  sets the x-axis on the y-axis, and if it's just a number, To divide the x-axis y-axis by how many copies;ticks: [[0,  "zero"], [1,  "online"], [2,  "idle"], [3,  "offline"] Defines the x axis of the callout;min: -2,max: 3,  set minimum, maximum value;tickdecimals: 0,  set the decimal number;

• parameter description with date as the X-axis:

  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]]

• To display label settings on pie and ring charts:

  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                                      }                        }                }          },

• Show Quantity on bar chart:

  Use Flot-barnumbers: detailed introduction URL: https://github.com/joetsoi/flot-barnumbers

  1. Introduction of Jquery.flot.barnumbers.js

  2. In the configuration of the histogram, write: series: {stack:true, bars: {show:true, numbers: {show:true, yalign:function (y) {return y + $scope. Maxydata * 0.03; }, Font: {color: ' #000000 '}}}

• Multidimensional Statistics Chart:
  

  When you are dynamically fetching data, you will encounter columns that result in multidimensional degrees because they are x-axis coordinates, not the kind of effect that you want to be next to each other: You can add calculations to the x-axis coordinates, although the pillars can be But a little bit spacing between the two pillars would be a better view: Add a bars:{barwidth: value} to each object in BarData.

Angular-flot Study Summary