jquery Drawing Tools Flot Learning Notes

Today I want to do a statistical chart, like 163 blog traffic statistics, with the help of flot, and very simple.

Flot website: http://code.google.com/p/flot/Download JS file, use the same method as jquery. Note: Flot is automatically drawn within the canvas label (canvas), IE is not supported and needs to be added excanvas.min.js, this file can be downloaded in the Flot URL above the example URL: Http://people.iola.dk/olau/flot /examples/parameter Description: http://wenku.baidu.com/view/d504613331126edb6f1a1008.html The above two URLs have been very clear on the basis. Example Description: Syntax: $.plot (ID, data, options), 1.id: The id2.data of the div that placed the canvas: data, usually in the form of a two-dimensional array. For example: [[X1,y1],[x2,y2],[x3,y3], ...] If a data is empty, the corresponding point is ignored and two points before and after pity Dorado are no longer connected by a straight line. 3.options: Style for setting the display style. Options in the format:

var options = {
	Lines: {show:true},
	Points: {show:true},
	Xaxis: {tickdecimals:0, ticksize:1}
	};

Parameter: 1.lines {} display line show:true display color: "#FFFFFF" line colors Steps:true step 2.points {} display dot 3.bars {} display histogram 4.xaxis { The style example of the horizontal axis: http://people.iola.dk/olau/flot/examples/basic.html Syntax Example: $.plot ($ ("#name"), [D1,D2,D3]), parameter ①:name for the canvas The ID of the div. The parameter ②:d2,d3 is generally an array of arrays [x,y],x and y represent the horizontal and vertical axes of each point respectively, such as the following: var D1 = [];for (var i = 0; I < + + 0.5) D1.push ([I, Math.sin (i)] var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];var d3 = [[0], [7], NULL, [7, 2.5], [2.5]];flot] automatically set the scale based on its maximum and canvas size , for example, set Div as follows <div id= "placeholder" style= "width:100px;height:100px;" ></div> the x direction each pixel represents 9/100=0.09 units, and the Y-direction of each pixel represents 12/100=0.12 units. Example two: http://people.iola.dk/olau/flot/examples/graph-types.html syntax examples:

$.plot($("#placeholder"), [    {        data: d1,        lines: { show: true, fill: true}    },    {        data: d2,        bars: { show: true}    },    {        data: d3,        points: { show: true}    },    {        data: d4,        lines: { show: true }    },    {        data: d5,        lines: { show: true},        points: { show: true }    },    {        data: d6,        lines: { show: true, steps: true}    }]);

Parameter Description: Lins represents a line, parameter steps:true represents a ladder diagram, bars represents a histogram, points represents a point chart.  Compared with example one, instance two encloses the data in example one in curly braces, and you need to specify the data source with "" Data: ", and then specify its display style after the comma. Example three: Specify the content usage instance for the scale display:

$.plot($("#placeholder"), [{ label: "", data: vData}],{    series: { lines: { show: true}, points: { show: true} },    xaxis: { ticks: [[1, "1月"], [3, "3月"], [5, "5月"], [7, "7月"], [9, "9月"], [11, "11月"]], min: 1, max: 12 },  //指定固定的显示内容    yaxis: { ticks: 5, min: 0 }  //在y轴方向显示5个刻度，此时显示内容由 flot 根据所给的数据自动判断}    );

Where VData is the custom data var vData = [[1, 103], [2, 28], [3, 135], [4, 130], [5, 145], [6, 155], [7, 155], [8, 155], [9, 155], [10,         155], [11, 155], [12, 155]]; The display effect is: The key parameter is ticks. You can see that the x-axis scale In this example is displayed on its own, the y-axis lets flot automatically divide, and of course you can specify the y-axis.

jquery Drawing Tools Flot Learning Notes