0
您好我正在試圖將工具提示放在flot圖表上，下面是我的代碼可以任何機構告訴我問題在哪裏。如何在Flot圖表上放置標籤工具提示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
</head>
<body>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p id="choices">Show:</p>
<p class="graphControls">
<input type="button" value="stack">
<input type="button" value="Bars">
<input type="button" value="Lines">
</p>
<p><label><input id="enableTooltip" type="checkbox">Enable tooltip</label></p>
<script language="javascript" type="text/javascript" >
var urlDataPart = "3 10 0 1 2 3 4 5 6 7 8 9 " +
"'Trans1' 20 23 20 40 12 56 10 70 20 30 " +
"'Trans2' 15 12 25 23 56 34 45 23 12 56 " +
"'Trans3' 12 45 23 12 34 89 12 70 34 30 ";
$(function() {
var datasets=[];
var data=urlDataPart.split(" ");
var seriesNum = parseInt(data[0]);
var pointNum = parseInt(data[1]);
var count = 2;
var intervals = [];
for (var i = 0; i < pointNum; i++) {
intervals[i] = data[count];
count++;
}
for (var i = 0; i < seriesNum; i++) {
var d1 = [];
var label_str=data[count];
count++;
for (var j = 0; j < pointNum; j++) {
if (j == 0) {
d1.push([]);
}
d1.push([intervals[j], data[count]]);
count++;
}
datasets[i] = {label:label_str,data:d1};
}
var i = 0;
$.each(datasets, function(key, val) {
val.color = i;
++i;
});
var choiceContainer = $("#choices");
$.each(datasets, function(key, val) {
choiceContainer.append('<br/><input type="checkbox" name="' + key +
'" checked="checked" id="id' + key + '">' +
'<label for="id' + key + '">'
+ val.label + '</label>');
});
choiceContainer.find("input").click(plotAccordingToChoices);
var stack = true, Area=true,StackedBar = false, LineGraph = true,points=true;
$(".graphControls input").click(function (e) {
var line;
e.preventDefault();
stack=true;
Area=true;
StackedBar=false;
LineGraph=true;
points=true;
StackedBar = $(this).val().indexOf("Bars") != -1;
Area = $(this).val().indexOf("stack") != -1;
if(StackedBar){
points=false;
LineGraph=false;
}
if(!Area && !StackedBar){
stack=null;
}
plotAccordingToChoices();
});
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y + 5,
left: x + 5,
border: '1px solid #fdd',
padding: '2px',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
var previousPoint = null;
$("#placeholder").bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var x = item.datapoint[0].toFixed(2),
y = item.datapoint[1].toFixed(2);
showTooltip(item.pageX, item.pageY,
item.series.label + " of " + x + " = " + y);
}
}
else {
$("#tooltip").remove();
previousPoint = null;
}
});
function plotAccordingToChoices() {
var data = [];
var data1=[[0,0]];
var flag=false;
choiceContainer.find("input:checked").each(function() {
var key = $(this).attr("name");
if (key && datasets[key])
data.push(datasets[key]);
flag=true;
});
if(!flag){
$.plot($("#placeholder"), data1, {
series:{
stack:true,
lines:{
show:true,
fill:true,
fillColor: { colors: [ { opacity: 0.7}, {opacity: 10 } ] }
},
points:{
show:true
},
grid: { hoverable: true, clickable: true },
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 }
}
});
}
if (data.length > 0 && flag){
$.plot($("#placeholder"), data, {
series:{
stack:stack,
lines:{
show:LineGraph,
fill:Area,
fillColor: { colors: [ { opacity: 0.7}, {opacity: 10 } ] }
},
bars: { show: StackedBar, barWidth: .10 },
points:{
show:points
},
grid: { hoverable: true},
yaxis: { min: 0 },
xaxis: { tickDecimals: 0 }
}
});
}
}
plotAccordingToChoices();
}
);
</script>
</body>
</html>
當你自己調試它時，你是否得到任何javascript錯誤？ – Mark 2013-02-19 15:57:55