前面的章节大多数都是只有一组数据的图表,这个章节将会介绍多组数据的图表,也就是多轴图,不管是y轴的多轴图或是x轴的多轴图,原理都是一样的,在建立图表数据时就需要指定axis的序号,而在建立图表选项时就利用该序号去建立. 这章会介绍y轴的多轴图.
多轴图(y轴)范例
绘图用到的档案
所有需要的档案清单如下.jquery.flot.axislabels.js为轴标签的插件,jquery.flot.symbol.js为数据点符号的插件.另外为了让IE8以下版本能显示Flot图表,所以需要excanvas.min.js插件.
<script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="/js/flot/jquery.flot.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="/js/flot/jquery.flot.symbol.js"></script>
建立数据
这个范例我们用三角函数的Sin、Cos及圆周率π来计算我们三组数据,数据格式如[x, y], x轴数据我们用流水号,而y轴数据则是用三角函数及π算出来.
//Sin(x)
var data1 = [
[0, 0.09983], [1, 0.19867], [2, 0.29552], [3, 0.38942], [4, 0.47943], [5, 0.56464], [6, 0.64422], [7, 0.71736], [8, 0.78333], [9, 0.84147], [10, 0.89121], [11, 0.93204], [12, 0.96356], [13, 0.98545], [14, 0.99749], [15, 0.99957], [16, 0.99166], [17, 0.97385], [18, 0.9463], [19, 0.9093], [20, 0.86321], [21, 0.8085], [22, 0.74571], [23, 0.67546], [24, 0.59847], [25, 0.5155], [26, 0.42738], [27, 0.33499], [28, 0.23925], [29, 0.14112], [30, 0.04158], [31, -0.05837], [32, -0.15775], [33, -0.25554], [34, -0.35078], [35, -0.44252], [36, -0.52984], [37, -0.61186], [38, -0.68777], [39, -0.7568], [40, -0.81828], [41, -0.87158], [42, -0.91617], [43, -0.9516], [44, -0.97753], [45, -0.99369], [46, -0.99992], [47, -0.99616], [48, -0.98245], [49, -0.95892], [50, -0.92581]
];
//Cos(x)
var data2 = [
[0, 0.995], [1, 0.98007], [2, 0.95534], [3, 0.92106], [4, 0.87758], [5, 0.82534], [6, 0.76484], [7, 0.69671], [8, 0.62161], [9, 0.5403], [10, 0.4536], [11, 0.36236], [12, 0.2675], [13, 0.16997], [14, 0.07074], [15, -0.0292], [16, -0.12884], [17, -0.2272], [18, -0.32329], [19, -0.41615], [20, -0.50485], [21, -0.5885], [22, -0.66628], [23, -0.73739], [24, -0.80114], [25, -0.85689], [26, -0.90407], [27, -0.94222], [28, -0.97096], [29, -0.98999], [30, -0.99914], [31, -0.99829], [32, -0.98748], [33, -0.9668], [34, -0.93646], [35, -0.89676], [36, -0.8481], [37, -0.79097], [38, -0.72593], [39, -0.65364], [40, -0.57482], [41, -0.49026], [42, -0.4008], [43, -0.30733], [44, -0.2108], [45, -0.11215], [46, -0.01239], [47, 0.0875], [48, 0.18651], [49, 0.28366], [50, 0.37798]
];
//PI * x
var data3 = [
[0, 0.31416], [1, 0.62832], [2, 0.94248], [3, 1.25664], [4, 1.5708], [5, 1.88496], [6, 2.19911], [7, 2.51327], [8, 2.82743], [9, 3.14159], [10, 3.45575], [11, 3.76991], [12, 4.08407], [13, 4.39823], [14, 4.71239], [15, 5.02655], [16, 5.34071], [17, 5.65487], [18, 5.96903], [19, 6.28319], [20, 6.59734], [21, 6.9115], [22, 7.22566], [23, 7.53982], [24, 7.85398], [25, 8.16814], [26, 8.4823], [27, 8.79646], [28, 9.11062], [29, 9.42478], [30, 9.73894], [31, 10.0531], [32, 10.36726], [33, 10.68142], [34, 10.99557], [35, 11.30973], [36, 11.62389], [37, 11.93805], [38, 12.25221], [39, 12.56637], [40, 12.88053], [41, 13.19469], [42, 13.50885], [43, 13.82301], [44, 14.13717], [45, 14.45133], [46, 14.76549], [47, 15.07964], [48, 15.3938], [49, 15.70796], [50, 16.02212]
];
最后是yaxis属性,我们分别设定为1、2及3,这属性是为了让后面会讲到的图表选项所使用的.
var dataset = [
{
label: "Sin(x)",
data: data1,
yaxis: 2,
color: "#FF0000",
points: { symbol: "circle", fillColor: "#FF0000", show: true },
lines: { show: true }
}, {
label: "Cos(x)",
data: data2,
yaxis: 1,
color: "#0062FF",
points: { symbol: "triangle", fillColor: "#0062FF", show: true },
lines: {show:true, fill:true}
}, {
label: "PI * x",
data: data3,
yaxis: 3,
color: "#319400",
points: { symbol: "diamond", fillColor: "#319400", show: true },
lines: { show: true }
}
];
建立图表选项
因为在这个范例x轴的数据是流水号,所以显示x轴刻度也无义意,所以我们把xaxis.ticks设定成[]空数组后,x轴的刻度卷标就不会显示了.
xaxis: {
ticks: []
}
//single data
yaxis:{
//options
}
//multiple datas
yaxes: [
{
//data1 options
},{
//data2 options
},{
//...
}
]
y轴选项程序代码如下.
yaxes: [{
position: "left",
color: "black",
axisLabel: "Sin(x)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}, {
position: "right",
color: "black",
axisLabel: "Cos(x)",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}, {
alignTicksWithAxis: 2,
position: "right",
color: "black",
axisLabel: "PI * x",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3
}
]
网格的部份设定了grid.hoverable为true,因为我们有用到提示框功能,所以必须设定.而grid.borderWidth是设定图表框的宽度,另外grid.mouseActiveRadius我们设定为50,表示鼠标移到数据点上方时会触发"plothover"事件的半径,而grid.axisMargin则表示刻度标签之间的间距(多个轴刻度在同一边时才有用).
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "#000000",
position: "nw"
}
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
axisMargin: 20
}
完成绘图
最后我们再呼叫$.plot把上面建立的dataset以及options带入,再呼叫UseTootip()后,整个绘图即完成.
$(document).ready(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
});