Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | {% extends "basex.html" %} |
2 | {% load markup %} | |
3 | {% block pageid %}code{% endblock %} | |
4 | {% block headers %} | |
5 | <link href="doc.css" media="screen" rel="stylesheet" type="text/css" /> | |
6 | {% endblock %} | |
7 | {% block title %}PlotKit.Canvas{% endblock %} | |
8 | ||
9 | {% block content %} | |
10 | <div class="page doc api"> | |
11 | {% filter markdown %} | |
12 | [PlotKit Home](PlotKit.html) | [<<](PlotKit.Renderer.html) | [>>](PlotKit.SVG.html) | |
13 | ||
14 | PlotKit Canvas | |
15 | ============== | |
16 | ||
17 | This contains the CanvasRenderer, the default renderer and most well supported one used in PlotKit. | |
18 | ||
19 | It supports Safari 2, Firefox 1.5, Opera 9 and IE 6. Note that for IE6 | |
20 | support, you will need iecanvas.htc which is included with PlotKit. | |
21 | ||
22 | Please see the [Canvas/SVG Browser Support Status][Browser] for bugs | |
23 | with the Canvas implementation on different browsers. | |
24 | ||
25 | PlotKit Canvas Extra Options | |
26 | ---------------------------- | |
27 | ||
28 | In addition to the options outlined in [PlotKit.Renderer][], here are additional options that the CanvasRenderer supports. | |
29 | ||
30 | <table> | |
31 | <thead> | |
32 | <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr> | |
33 | </thead> | |
34 | <tbody> | |
35 | <tr> | |
36 | <th>IECanvasHTC</th> | |
37 | <td>Path relative to the HTML document of the iecanvas.htc file.</td> | |
38 | <td>string</td> | |
39 | <td>iecanvas.htc</td> | |
40 | </tr> | |
41 | </tbody> | |
42 | </table> | |
43 | ||
44 | PlotKit Canvas Example | |
45 | ---------------------- | |
46 | ||
47 | var options = { | |
48 | "drawsBackground": true, | |
49 | "drawYAxis": false, | |
50 | "IECanvasHTC": "contrib/iecanvas.htc" | |
51 | }; | |
52 | ||
53 | var layout = new Layout("bar", {}); | |
54 | layout.addDataset("squares", [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]); | |
55 | layout.evaluate() | |
56 | var renderer = new CanvasRenderer($('canvas'), layout, options); | |
57 | layout.render(); | |
58 | ||
59 | PlotKit Canvas Events/Signals | |
60 | ----------------------------- | |
61 | ||
62 | There is preliminary support for events in the CanvasRenderer. If ``enableEvents`` is set ``true`` in the options, you can hook into the ``onmousemove``, ``onclick``, ``onmouseover`` and ``onmouseout`` events via the MochiKit.Signal.connect. Note that you must have included MochiKit/Signal.js before instantiating the CanvasRenderer | |
63 | ||
64 | PlotKit Canvas Notes | |
65 | -------------------- | |
66 | ||
67 | ### IE Support | |
68 | ||
69 | IE Support is done thanks to webfx's great iecanvas.htc which emulates | |
70 | part of the WHATWG canvas specification. Note that alpha values and | |
71 | clear() does not work in IE. | |
72 | ||
73 | Remember that iecanvas.htc __must__ reside on the same domain as the | |
74 | HTML page itself. | |
75 | ||
76 | [PlotKit.Renderer]: PlotKit.Renderer.html | |
77 | [Browser]: SVGCanvasCompat.html | |
78 | ||
79 | {% endfilter %} | |
80 | </div> | |
81 | {% endblock %} |