Skip to content

F
flot
Commit 4203a66e authored by David Schnur's avatar David Schnur
Browse files
Options

Add text to its actual layer before measuring it. 

The getTextInfo method previously added new text to the top-level
container when measuring it.  Now it adds the text to the text layer,
just as it will be when rendered, so that parent-child CSS rules can
resolve correctly.

This also avoids having to safe a reference to the top-level container,
since it wasn't used anywhere else.
parent e7de8735
Hide whitespace changes
Inline Side-by-side
Showing with 50 additions and 9 deletions
examples/basic-canvas.html 0 → 100644
View file @ 4203a66e
<!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>Flot Examples</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 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.canvas.js"></script>
</head>
<body>
<h1>Flot Examples</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<p>Simple example. You don't need to specify much to get an
attractive look. Put in a placeholder, make sure you set its
dimensions (otherwise the plot library will barf) and call the
plot function with the data. The axes are automatically
scaled.</p>
<script type="text/javascript">
$(function () {
var d1 = [];
for (var i = 0; i < 14; i += 0.5)
d1.push([i, Math.sin(i)]);
var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
// a null signifies separate line segments
var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
$.plot($("#placeholder"), [ d1, d2, d3 ], {canvas: true});
});
</script>
</body>
</html>
jquery.flot.canvas.js
View file @ 4203a66e
......@@ -201,7 +201,11 @@ browser, but needs to redraw with canvas text when exporting as an image.
var element = $("<div></div>").html(text)
.addClass(typeof font === "string" ? font : null)
.appendTo(this.container);
.css({
position: "absolute",
top: -9999
})
.appendTo(this.getTextLayer());
font = {
style: element.css("font-style"),
......
jquery.flot.js
View file @ 4203a66e
......@@ -56,8 +56,6 @@ Licensed under the MIT license.
function Canvas(cls, container) {
this.container = container;
var element = document.createElement("canvas");
element.className = cls;
this.element = element;
......@@ -292,10 +290,12 @@ Licensed under the MIT license.
if (info == null) {
var element = $("<div></div>").html(text).css({
position: "absolute",
top: -9999
});
var element = $("<div></div>").html(text)
.css({
position: "absolute",
top: -9999
})
.appendTo(this.getTextLayer());
if (typeof font === "object") {
element.css({
......@@ -306,8 +306,6 @@ Licensed under the MIT license.
element.addClass(font);
}
element.appendTo(this.container);
info = {
active: false,
rendered: false,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment