You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.0 KiB
88 lines
2.0 KiB
1 year ago
|
<!doctype html>
|
||
|
|
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
|
|
|
||
|
|
<title>flot.tooltip plugin example page</title>
|
||
|
|
<meta name="author" content="@krzysu, myviews.pl">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
|
||
|
|
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
|
||
|
|
<!--[if lte IE 8]><script src="js/excanvas.min.js"></script><![endif]-->
|
||
|
|
<script src="js/jquery.flot.js"></script>
|
||
|
|
<script src="js/jquery.flot.pie.js"></script>
|
||
|
|
<script src="../js/jquery.flot.tooltip.js"></script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
body {font-family: sans-serif; font-size: 16px; margin: 50px; max-width: 800px;}
|
||
|
|
h4, ul {margin: 0;}
|
||
|
|
.flotTip
|
||
|
|
{
|
||
|
|
padding: 3px 5px;
|
||
|
|
background-color: #000;
|
||
|
|
z-index: 100;
|
||
|
|
color: #fff;
|
||
|
|
box-shadow: 0 0 10px #555;
|
||
|
|
opacity: .7;
|
||
|
|
filter: alpha(opacity=70);
|
||
|
|
border: 2px solid #fff;
|
||
|
|
-webkit-border-radius: 4px;
|
||
|
|
-moz-border-radius: 4px;
|
||
|
|
border-radius: 4px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<h1>flot.tooltip plugin example page</h1>
|
||
|
|
|
||
|
|
<div id="placeholder" style="width: 500px; height: 400px;"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
var data = [
|
||
|
|
{ label: "Series 0", data: 1 },
|
||
|
|
{ label: "Series 1", data: 3 },
|
||
|
|
{ label: "Series 2", data: 9 },
|
||
|
|
{ label: "Series 3", data: 20 }
|
||
|
|
];
|
||
|
|
|
||
|
|
var plotObj = $.plot($("#placeholder"), data, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 3/4,
|
||
|
|
// formatter: labelFormatter,
|
||
|
|
background: {
|
||
|
|
opacity: 0.5,
|
||
|
|
color: '#000'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
show: true,
|
||
|
|
content: "%p.0%, %s, n=%n", // show percentages, rounding to 2 decimal places
|
||
|
|
shifts: {
|
||
|
|
x: 20,
|
||
|
|
y: 0
|
||
|
|
},
|
||
|
|
defaultTheme: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|