チャートをプロットするために2つのx軸とY軸を使用しています。正しく表示される棒グラフもありますが、オンオフ機能がチェックボックスで機能していません
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Power Data</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://www.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://www.pureexample.com/js/flot/jquery.flot.min.js"></script>
</head>
<body>
<h2>Power Data </h2>
<p>
<div id="legendcontainer" style="width: 1100px;position:"></div>
<div id="placeholder" style="width:1100px;height:400px;"></div>
<div id="legend" style="width:600px;height:300px;"> </div>
</p>
<script type="text/javascript">
$('#legend .legendCB').click(function(){
plotByChoice(true);
});
var loadData = [
[40921,760],[40922,728],[40923,743],[40924,737],[40925,721],[40926,719],[40927,727],[40928,715],[40929,707],[40930,710],[40931,714],[40932,724],
[40933,702],[40934,690],[40935,695],[40936,707],[40937,711],[40938,717],[40939,727],[40940,745],[40941,783],[40942,793],[40943,820],[40944,864],
[40945,922],[40946,974],[40947,1028],[40948,1090],[40949,1149],[40950,1196],[40951,1212],[40952,1233],[40953,1217],[40954,1201],[40955,1172],
[40956,1148],[40957,1158],[40958,1143],[40959,1139],[40960,1114],[40961,1101],[40962,1108],[40963,1118],[40964,1106],[40965,1070],[40966,1054],
[40967,1044],[40968,1055],[40969,1050],[40970,1032],[40971,1033],[40972,1001],[40973,978],[40974,961],[40975,960],[40976,984],[40977,995],
[40978,974],[40979,990],[40980,979],[40981,989],[40982,987],[40983,998],[40984,1002],[40985,1014],[40986,1025],[40987,1032],[40988,1041],
[40989,1045],[40990,1067]
];
var predicatedLoad = [
[40921,826],[40922,812],[40923,794],[40924,799],[40925,790],[40926,788],[40927,786],[40928,782],[40929,783],[40930,772],[40931,760],[40932,773],
[40933,768],[40934,765],[40935,762],[40936,762],[40937,774],[40938,770],[40939,776],[40940,801],[40941,817],[40942,840],[40943,871],[40944,927],
[40945,963],[40946,1000],[40947,1051],[40948,1106],[40949,1183],[40950,1231],[40951,1243],[40952,1263],[40953,1247],[40954,1234],[40955,1226],
[40956,1207],[40957,1219],[40958,1207],[40959,1191],[40960,1208],[40961,1170],[40962,1185],[40963,1159],[40964,1163],[40965,1145],[40966,1128],
[40967,1122],[40968,1113],[40969,1118],[40970,1101],[40971,1096],[40972,1091],[40973,1046],[40974,1054],[40975,1029],[40976,1066],[40977,1067],
[40978,1062],[40979,1069],[40980,1075],[40981,1055],[40982,1060],[40983,1080],[40984,1068],[40985,1083],[40986,1067],[40987,1083],[40988,1084],
[40989,1086],[40990,1098],[40991,1122],[40992,1175],[40993,1200],[40994,1140],[40995,1089],[40996,1113],[40997,1106],[40998,1096]
];
var powercut =[
[40921,0],[40922,0],[40923,0],[40924,0],[40925,0],[40926,0],[40927,0],[40928,0],[40929,0],[40930,0],[40931,0],[40932,10],[40933,0],[40934,0],
[40935,0],[40936,0],[40937,0],[40938,0],[40939,10],[40940,0],[40941,0],[40942,10],[40943,0],[40944,0],[40945,0],[40946,0],[40947,0],
[40948,0],[40949,0],[40950,0],[40951,0],[40952,0],[40953,0],[40954,0],[40955,0],[40956,0],[40957,0],[40958,0],[40959,0],[40960,0],
[40961,0],[40962,0],[40963,0],[40964,0],[40965,0],[40966,0],[40967,0],[40968,0],[40969,0],[40970,0],[40971,0],[40972,0],[40973,0],
[40974,0],[40975,0],[40976,0],[40977,0],[40978,0],[40979,20],[40980,0],[40981,0],[40982,0],[40983,0],[40984,0],[40985,0],[40986,0],
[40987,0],[40988,0],[40989,0],[40990,0]
];
var diffData = [[40921,66],[40922,84],[40923,51],[40924,62],[40925,69],[40926,69],[40927,59],[40928,67],[40929,76],[40930,62],[40931,46],
[40932,49],[40933,66],[40934,75],[40935,67],[40936,55],[40937,63],[40938,53],[40939,49],[40940,56],[40941,34],[40942,47],
[40943,51],[40944,63],[40945,41],[40946,26],[40947,23],[40948,16],[40949,34],[40950,35],[40951,31],[40952,30],[40953,30],[40954,33],
[40955,54],[40956,59],[40957,61],[40958,64],[40959,52],[40960,94],[40961,69],[40962,77],[40963,41],[40964,57],[40965,75],
[40966,74],[40967,78],[40968,58],[40969,68],[40970,69],[40971,63],[40972,90],[40973,68],[40974,93],[40975,69],
[40976,82],[40977,72],[40978,88],[40979,79],[40980,96],[40981,66],[40982,73],[40983,82],[40984,66],[40985,69],
[40986,42],[40987,51],[40988,43],
[40989,41]
];
var myticks = [[40920, "12-01-2012 B-1"],[40925, "12-01-2012 B-5"],[40930, "12-01-2012 B-10"],
[40935, "12-01-2012 B-15"],[40940, "12-01-2012 B-20"],[40945, "12-01-2012 B-25"],
[40950, "12-01-2012 B-30"],[40955, "12-01-2012 B-35"],[40960, "12-01-2012 B-40"],
[40965, "12-01-2012 B-45"],
[40970, "12-01-2012 B-50"],
[40975, "12-01-2012 B-55"],
[40980, "12-01-2012 B-60"],
[40985, "12-01-2012 B-65"],
[40990, "12-01-2012 B-70"],
[40995, "12-01-2012 B-75"],
[41000, "12-01-2012 B-80"],
[41005, "12-01-2012 B-85"],
[41010, "12-01-2012 B-90"],
[41015, "12-01-2012 B-95"],
[41020, "13-01-2012 B-1"],
[41025, "13-01-2012 B-5"],
[41030, "12-01-2012 B-1"],
[41035, "12-01-2012 B-1"],
[41040, "13-01-2012 B-5"],
[41045, "13-01-2012 B-5"],
[41050, "13-01-2012 B-5"],
[41055, "13-01-2012 B-5"],
[41060, "13-01-2012 B-5"],
[41065, "13-01-2012 B-5"]];
var datasets ={
"Load Data" :{
label : "Load Data",
data: loadData
},
"Power Cut Load" :{
label : "Power Cut Load",
data : powercut
},
"Difference Data" :{
label: "Difference Data",
data : diffData
},
"Predicated Load" :{
label: "Predicated Load",
data:predicatedLoad
}
}
data = null;
var firstTime =true;
function plotByChoice(doAll)
{
data = [];
if (doAll != null)
{
$.each(datasets, function(key, val) {
data.push(val);
});
}
else
{
$('#legend .legendCB').each(
function(){
alert("I am called");
if (this.checked)
{
alert("I am called inside");
data.push(datasets[this.id]);
}
else
{
data.push({label: this.id, data: []})
}
}
);
}
$.plot($("#placeholder"),
[ {
data: $('#Load Data:checked') ? loadData : [],
lines:{show : true },
label: "Load Data"
},
{ data: $('#Predicated Load:checked') ? predicatedLoad : [], label: "Predicated Load" },
{ data: $('#Difference Data:checked') ? diffData : [], label: "Difference Data",
bars:{
show:true
},
color:'blue'
},
{ data: $('#Power Cut Load:checked')? powercut : [], label: "Power Cut Load", yaxis: 2}
],
{
xaxis:
{ min:40920,
ticks:myticks
},
yaxes: [ { min: 0 },
{
// align if we are to the right
alignTicksWithAxis: "right",
position: "right",
min :-25,
max:50
} ],
// legend: { labelBoxBorderColor: "#0200f0", container: $("#legendcontainer"), noColumns: 2},
legend: {
container: legend,
labelFormatter: function (label, series) {
var cb = '<input class="legendCB" type="checkbox" ';
if($('#Load Data:checked')){
cb += 'checked="true" ';
}else if($('#Predicated Load:checked')){
cb += 'checked="true" ';
}else if($('#Difference Data:checked')){
cb += 'checked="true" ';
}else if($('#Power Cut Load:checked')){
cb += 'checked="true" ';
}
cb += 'id="'+label+'" /> ';
cb += label;
alert("check boxes: " + cb)
return cb;
}
}
});
$('#legend').find("input").click(function(){setTimeout(plotByChoice,100);});
// $('#legend .legendCB').change(function(){setTimeout(plotByChoice,1000);});
}
plotByChoice(this);
</script>
</body>
</html>
チェックボックスをオフ/チェックすることはできますが、チェックボックスに再度リセットされました。私は http://jsfiddle.net/yijiang/6FLsM/2/を参照しています
と