图表图例
要让Flot显示图例, 在资料来源里要先设定label属性
//此图表可以显示图例
$.plot($("#flotcontainer"),
[
{label: "data1", data: dataset1},
{label: "data2", data: dataset2},
{label: "data3", data: dataset3}
]);
//此图表无法显示图例, 因为没有设定label属性
$.plot($("#flotcontainer"),
[
{data: dataset1},
{data: dataset2},
{data: dataset3}
]);
含有图例的折线图
范例程式码Expand
$(function () {
function GenerateSeries(added){
var data = [];
var start = 100 + added;
var end = 500 + added;
for(i=1;i<=20;i++){
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var data1 = GenerateSeries(0);
var data2 = GenerateSeries(10);
var data3 = GenerateSeries(20);
$.plot($("#example-section20 #flotcontainer"),
[
{label:"data1", data:data1},
{label:"data2", data:data2},
{label:"data3", data:data3}
],
{
grid: {
backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
}
}
);
});
含有图例的直条图
范例程式码Expand
$(function () {
function GenerateSeries(added){
var data = [];
var start = 100 + added;
var end = 500 + added;
for(i=1;i<=20;i++){
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var data1 = GenerateSeries(0);
var data2 = GenerateSeries(10);
var data3 = GenerateSeries(20);
var options = {
series: {
stack:true,
bars: {
show: true
}
}
};
$.plot($("#example-section21 #flotcontainer"),
[
{label:"data1", data:data1},
{label:"data2", data:data2},
{label:"data3", data:data3}
]
, options);
});
含有图例的圆饼图
范例程式码Expand
$(function () {
function GenerateSeries(added){
var data = [];
var start = 100 + added;
var end = 500 + added;
for(i=1;i<=20;i++){
var d = Math.floor(Math.random() * (end - start + 1) + start);
data.push([i, d]);
start++;
end++;
}
return data;
}
var options = {
series: {
pie: {
show: true,
tilt: 0.5
}
}
};
var data = [
{label: "data1", data:GenerateSeries(0)},
{label: "data2", data:GenerateSeries(0)},
{label: "data3", data:GenerateSeries(0)},
{label: "data4", data:GenerateSeries(0)},
{label: "data5", data:GenerateSeries(0)},
{label: "data6", data:GenerateSeries(0)}
];
$.plot($("#example-section22 #flotcontainer"), data, options);
});