OpenCart v1.4.9.3 简体中文版

Flot Reference -------------- Consider a call to the plot function: var plot = $.plot(placeholder, data, options) The placeholder is a jQuery object or DOM element or jQuery expression that the plot will be put into. This placeholder needs to have its width and height set as explained in the README (go read that now if you haven't, it's short). The plot will modify some properties of the placeholder so it's recommended you simply pass in a div that you don't use for anything else. Make sure you check any fancy styling you apply to the div, e.g. background images have been reported to be a problem on IE 7. The format of the data is documented below, as is the available options. The "plot" object returned has some methods you can call. These are documented separately below. Note that in general Flot gives no guarantees if you change any of the objects you pass in to the plot function or get out of it since they're not necessarily deep-copied. Data Format ----------- The data is an array of data series: [ series1, series2, ... ] A series can either be raw data or an object with properties. The raw data format is an array of points: [ [x1, y1], [x2, y2], ... ] E.g. [ [1, 3], [2, 14.01], [3.5, 3.14] ] Note that to simplify the internal logic in Flot both the x and y values must be numbers (even if specifying time series, see below for how to do this). This is a common problem because you might retrieve data from the database and serialize them directly to JSON without noticing the wrong type. If you're getting mysterious errors, double check that you're inputting numbers and not strings. If a null is specified as a point or if one of the coordinates is null or couldn't be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a line segment end, i.e. the points before and after the null value are not connected. Lines and points take two coordinates. For bars, you can specify a third coordinate which is the bottom of the bar (defaults to 0). The format of a single series object is as follows: { color: color or number data: rawdata label: string lines: specific lines options bars: specific bars options points: specific points options xaxis: 1 or 2 yaxis: 1 or 2 clickable: boolean hoverable: boolean shadowSize: number } You don't have to specify any of them except the data, the rest are options that will get default values. Typically you'd only specify label and data, like this: { label: "y = 3", data: [[0, 3], [10, 3]] } The label is used for the legend, if you don't specify one, the series will not show up in the legend. If you don't specify color, the series will get a color from the auto-generated colors. The color is either a CSS color specification (like "rgb(255, 100, 123)") or an integer that specifies which of auto-generated colors to select, e.g. 0 will get color no. 0, etc. The latter is mostly useful if you let the user add and remove series, in which case you can hard-code the color index to prevent the colors from jumping around between the series. The "xaxis" and "yaxis" options specify which axis to use, specify 2 to get the secondary axis (x axis at top or y axis to the right). E.g., you can use this to make a dual axis plot by specifying { yaxis: 2 } for one data series. "clickable" and "hoverable" can be set to false to disable interactivity for specific series if interactivity is turned on in the plot, see below. The rest of the options are all documented below as they are the same as the default options passed in via the options parameter in the plot commmand. When you specify them for a specific data series, they will override the default options for the plot for that data series. Here's a complete example of a simple data specification: [ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] }, { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] } ] Plot Options ------------ All options are completely optional. They are documented individually below, to change them you just specify them in an object, e.g. var options = { series: { lines: { show: true }, points: { show: true } } }; $.plot(placeholder, data, options); Customizing the legend ====================== legend: { show: boolean labelFormatter: null or (fn: string, series object -> string) labelBoxBorderColor: color noColumns: number position: "ne" or "nw" or "se" or "sw" margin: number of pixels or [x margin, y margin] backgroundColor: null or color backgroundOpacity: number between 0 and 1 container: null or jQuery object/DOM element/jQuery expression } The legend is generated as a table with the data series labels and small label boxes with the color of the series. If you want to format the labels in some way, e.g. make them to links, you can pass in a function for "labelFormatter". Here's an example that makes them clickable: labelFormatter: function(label, series) { // series is the series object for the label return '<a href="#' + label + '">' + label + '</a>'; } "noColumns" is the number of columns to divide the legend table into. "position" specifies the overall placement of the legend within the plot (top-right, top-left, etc.) and margin the distance to the plot edge (this can be either a number or an array of two numbers like [x, y]). "backgroundColor" and "backgroundOpacity" specifies the background. The default is a partly transparent auto-detected background. If you want the legend to appear somewhere else in the DOM, you can specify "container" as a jQuery object/expression to put the legend table into. The "position" and "margin" etc. options will then be ignored. Note that Flot will overwrite the contents of the container. Customizing the axes ==================== xaxis, yaxis, x2axis, y2axis: { mode: null or "time" min: null or number max: null or number autoscaleMargin: null or number labelWidth: null or number labelHeight: null or number transform: null or fn: number -> number inverseTransform: null or fn: number -> number ticks: null or number or ticks array or (fn: range -> ticks array) tickSize: number or array minTickSize: number or array tickFormatter: (fn: number, object -> string) or string tickDecimals: null or number } All axes have the same kind of options. The "mode" option determines how the data is interpreted, the default of null means as decimal numbers. Use "time" for time series data, see the next section. The options "min"/"max" are the precise minimum/maximum value on the scale. If you don't specify either of them, a value will automatically be chosen based on the minimum/maximum data values. The "autoscaleMargin" is a bit esoteric: it's the fraction of margin that the scaling algorithm will add to avoid that the outermost points ends up on the grid border. Note that this margin is only applied when a min or max value is not explicitly set. If a margin is specified, the plot will furthermore extend the axis end-point to the nearest whole tick. The default value is "null" for the x axis and 0.02 for the y axis which seems appropriate for most cases. "labelWidth" and "labelHeight" specifies a fixed size of the tick labels in pixels. They're useful in case you need to align several plots. "transform" and "inverseTransform" are callbacks you can put in to change the way the data is drawn. You can design a function to compress or expand certain parts of the axis non-linearly, e.g. suppress weekends or compress far away points with a logarithm or some other means. When Flot draws the plot, each value is first put through the transform function. Here's an example, the x axis can be turned into a natural logarithm axis with the following code: xaxis: { transform: function (v) { return Math.log(v); }, inverseTr