[英]Flot Charts - Issues getting Tooltips plugin to show
I'm working with Flot Charts ( http://www.flotcharts.org ) and having problems getting some plugins to work. 我正在使用Flot Charts( http://www.flotcharts.org ),但在使某些插件正常工作时遇到了问题。 Below is my line graph and I can't get the tooltips plugin to show ( https://github.com/krzysu/flot.tooltip ).
以下是我的折线图,我无法显示工具提示插件( https://github.com/krzysu/flot.tooltip )。 I also couldn't get an axis labels plugin to work either.
我也无法使轴标签插件正常工作。 However, the resize plugin works good.
但是,调整大小插件效果很好。 What's up with my code?
我的代码怎么了? I appreciate any help.
感谢您的帮助。
<head>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FitText.js/1.2.0/jquery.fittext.min.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.tooltip.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.resize.js"></script>
<!--<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.time.js"></script>-->
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$.ajax({
//usually, we'll just call the same URL, a script
//connected to a database, but in this case we only
//have static example files so we need to modify the
//URL
url: "views/sales_year_line_data.php",
method: 'GET',
dataType: 'json',
success: onOutboundReceived
});
function onOutboundReceived(series) {
var length = series.length;
var finalData = series;
var options = {
lines: { show: true, fill: true},
points: { show: true, hoverable:true },
grid: { show: true, aboveData: false, color: "rgba(255, 255, 255, 1.0)", borderWidth: 0, hoverable: true, clickable: true },
legend: {position: "sw", backgroundOpacity: 0},
xaxis: { ticks: [[1,'Jan'],[2,'Feb'],[3,'Mar'],[4,'Apr'],[5,'May'],[6,'Jun'],[7,'Jul'],[8,'Aug'],[9,'Sep'],[10,'Oct'],[11,'Nov'],[12,'Dec']] },
yaxis: { show: false },
tooltip: { show: true, content: "%s | x: %x; y: %y"}
};
$.plot($("#test-flot"), finalData, options);
}
});
</script>
</head>
我使用了cloudflare.com cdn上的jquery.flot.tooltip.js,现在工具提示起作用了。
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot.tooltip/0.8.5/jquery.flot.tooltip.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.