flot.js ajax,Flot 图表图例 - Pure Example

图表图例

要让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);

});