pv.Label.html 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <meta name="generator" content="JsDoc Toolkit" />
  7. <title>JsDoc Reference - pv.Label</title>
  8. <style type="text/css">
  9. /* default.css */
  10. body
  11. {
  12. font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
  13. width: 800px;
  14. }
  15. .header
  16. {
  17. clear: both;
  18. background-color: #ccc;
  19. padding: 8px;
  20. }
  21. h1
  22. {
  23. font-size: 150%;
  24. font-weight: bold;
  25. padding: 0;
  26. margin: 1em 0 0 .3em;
  27. }
  28. hr
  29. {
  30. border: none 0;
  31. border-top: 1px solid #7F8FB1;
  32. height: 1px;
  33. }
  34. pre.code
  35. {
  36. display: block;
  37. padding: 8px;
  38. border: 1px dashed #ccc;
  39. }
  40. #index
  41. {
  42. margin-top: 24px;
  43. float: left;
  44. width: 160px;
  45. position: absolute;
  46. left: 8px;
  47. background-color: #F3F3F3;
  48. padding: 8px;
  49. }
  50. #content
  51. {
  52. margin-left: 190px;
  53. width: 600px;
  54. }
  55. .classList
  56. {
  57. list-style-type: none;
  58. padding: 0;
  59. margin: 0 0 0 8px;
  60. font-family: arial, sans-serif;
  61. font-size: 1em;
  62. overflow: auto;
  63. }
  64. .classList li
  65. {
  66. padding: 0;
  67. margin: 0 0 8px 0;
  68. }
  69. .summaryTable { width: 100%; }
  70. h1.classTitle
  71. {
  72. font-size:170%;
  73. line-height:130%;
  74. }
  75. h2 { font-size: 110%; }
  76. caption, div.sectionTitle
  77. {
  78. background-color: #7F8FB1;
  79. color: #fff;
  80. font-size:130%;
  81. text-align: left;
  82. padding: 2px 6px 2px 6px;
  83. border: 1px #7F8FB1 solid;
  84. }
  85. div.sectionTitle { margin-bottom: 8px; }
  86. .summaryTable thead { display: none; }
  87. .summaryTable td
  88. {
  89. vertical-align: top;
  90. padding: 4px;
  91. border-bottom: 1px #7F8FB1 solid;
  92. border-right: 1px #7F8FB1 solid;
  93. }
  94. /*col#summaryAttributes {}*/
  95. .summaryTable td.attributes
  96. {
  97. border-left: 1px #7F8FB1 solid;
  98. width: 140px;
  99. text-align: right;
  100. }
  101. td.attributes, .fixedFont
  102. {
  103. line-height: 15px;
  104. color: #002EBE;
  105. font-family: "Courier New",Courier,monospace;
  106. font-size: 13px;
  107. }
  108. .summaryTable td.nameDescription
  109. {
  110. text-align: left;
  111. font-size: 13px;
  112. line-height: 15px;
  113. }
  114. .summaryTable td.nameDescription, .description
  115. {
  116. line-height: 15px;
  117. padding: 4px;
  118. padding-left: 4px;
  119. }
  120. pre
  121. {
  122. border-left: solid 10px #ddd;
  123. padding-left: 1.5em;
  124. }
  125. .summaryTable { margin-bottom: 8px; }
  126. ul.inheritsList
  127. {
  128. list-style: square;
  129. margin-left: 20px;
  130. padding-left: 0;
  131. }
  132. .detailList {
  133. margin-left: 20px;
  134. line-height: 15px;
  135. }
  136. .detailList dt { margin-left: 20px; }
  137. .detailList .heading
  138. {
  139. font-weight: bold;
  140. padding-bottom: 6px;
  141. margin-left: 0;
  142. }
  143. .light, td.attributes, .light a:link, .light a:visited
  144. {
  145. color: #777;
  146. font-style: italic;
  147. }
  148. .fineprint
  149. {
  150. text-align: right;
  151. font-size: 10px;
  152. }
  153. </style>
  154. </head>
  155. <body>
  156. <!-- ============================== header ================================= -->
  157. <!-- begin static/header.html -->
  158. <div id="header">
  159. </div>
  160. <!-- end static/header.html -->
  161. <!-- ============================== classes index ============================ -->
  162. <div id="index">
  163. <!-- begin publish.classesIndex -->
  164. <div align="center"><a href="../index.html">Class Index</a>
  165. | <a href="../files.html">File Index</a></div>
  166. <hr />
  167. <h2>Classes</h2>
  168. <ul class="classList">
  169. <li><i><a href="../symbols/_global_.html">_global_</a></i></li>
  170. <li><a href="../symbols/Array.html">Array</a></li>
  171. <li><a href="../symbols/Date.html">Date</a></li>
  172. <li><a href="../symbols/pv.html">pv</a></li>
  173. <li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
  174. <li><a href="../symbols/pv.Area.html">pv.Area</a></li>
  175. <li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
  176. <li><a href="../symbols/pv.Color.html">pv.Color</a></li>
  177. <li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
  178. <li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
  179. <li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
  180. <li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
  181. <li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
  182. <li><a href="../symbols/pv.Image.html">pv.Image</a></li>
  183. <li><a href="../symbols/pv.Label.html">pv.Label</a></li>
  184. <li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
  185. <li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
  186. <li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
  187. <li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
  188. <li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
  189. <li><a href="../symbols/pv.Line.html">pv.Line</a></li>
  190. <li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
  191. <li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
  192. <li><a href="../symbols/pv.ns.html">pv.ns</a></li>
  193. <li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
  194. <li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
  195. <li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
  196. <li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
  197. <li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
  198. <li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
  199. <li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
  200. <li><a href="../symbols/pv.version.html">pv.version</a></li>
  201. <li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
  202. </ul>
  203. <hr />
  204. <!-- end publish.classesIndex -->
  205. </div>
  206. <div id="content">
  207. <!-- ============================== class title ============================ -->
  208. <h1 class="classTitle">
  209. Class pv.Label
  210. </h1>
  211. <!-- ============================== class summary ========================== -->
  212. <p class="description">
  213. <br />Extends
  214. <a href="../symbols/pv.Mark.html">pv.Mark</a>.<br />
  215. Represents a text label, allowing textual annotation of other marks or
  216. arbitrary text within the visualization. The character data must be plain
  217. text (unicode), though the text can be styled using the <a href="#font">#font</a>
  218. property. If rich text is needed, external HTML elements can be overlaid on
  219. the canvas by hand.
  220. <p>Labels are positioned using the box model, similarly to Dot. Thus,
  221. a label has no width or height, but merely a text anchor location. The text
  222. is positioned relative to this anchor location based on the
  223. <a href="#textAlign">#textAlign</a>, <a href="#textBaseline">#textBaseline</a> and <a href="#textMargin">#textMargin</a> properties.
  224. Furthermore, the text may be rotated using <a href="#textAngle">#textAngle</a>.
  225. <p>Labels ignore events, so as to not interfere with event handlers on
  226. underlying marks, such as bars. In the future, we may support event handlers
  227. on labels.
  228. <p>See also the <a href="../../api/Label.html">Label guide</a>.
  229. <br /><i>Defined in: </i> <a href="../symbols/src/mark_Label.js.html">Label.js</a>.
  230. </p>
  231. <!-- ============================== constructor summary ==================== -->
  232. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Label.">
  233. <caption>Class Summary</caption>
  234. <thead>
  235. <tr>
  236. <th scope="col">Constructor Attributes</th>
  237. <th scope="col">Constructor Name and Description</th>
  238. </tr>
  239. </thead>
  240. <tbody>
  241. <tr>
  242. <td class="attributes">&nbsp;</td>
  243. <td class="nameDescription" >
  244. <div class="fixedFont">
  245. <b><a href="../symbols/pv.Label.html#constructor">pv.Label</a></b>()
  246. </div>
  247. <div class="description">Constructs a new label mark with default properties.</div>
  248. </td>
  249. </tr>
  250. </tbody>
  251. </table>
  252. <!-- ============================== properties summary ===================== -->
  253. <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Label.">
  254. <caption>Field Summary</caption>
  255. <thead>
  256. <tr>
  257. <th scope="col">Field Attributes</th>
  258. <th scope="col">Field Name and Description</th>
  259. </tr>
  260. </thead>
  261. <tbody>
  262. <tr>
  263. <td class="attributes">&nbsp;</td>
  264. <td class="nameDescription">
  265. <div class="fixedFont">
  266. <b><a href="../symbols/pv.Label.html#defaults">defaults</a></b>
  267. </div>
  268. <div class="description">Default properties for labels.</div>
  269. </td>
  270. </tr>
  271. <tr>
  272. <td class="attributes">&nbsp;</td>
  273. <td class="nameDescription">
  274. <div class="fixedFont">
  275. <b><a href="../symbols/pv.Label.html#font">font</a></b>
  276. </div>
  277. <div class="description">The font format, per the CSS Level 2 specification.</div>
  278. </td>
  279. </tr>
  280. <tr>
  281. <td class="attributes">&nbsp;</td>
  282. <td class="nameDescription">
  283. <div class="fixedFont">
  284. <b><a href="../symbols/pv.Label.html#text">text</a></b>
  285. </div>
  286. <div class="description">The character data to render; a string.</div>
  287. </td>
  288. </tr>
  289. <tr>
  290. <td class="attributes">&nbsp;</td>
  291. <td class="nameDescription">
  292. <div class="fixedFont">
  293. <b><a href="../symbols/pv.Label.html#textAlign">textAlign</a></b>
  294. </div>
  295. <div class="description">The horizontal text alignment.</div>
  296. </td>
  297. </tr>
  298. <tr>
  299. <td class="attributes">&nbsp;</td>
  300. <td class="nameDescription">
  301. <div class="fixedFont">
  302. <b><a href="../symbols/pv.Label.html#textAngle">textAngle</a></b>
  303. </div>
  304. <div class="description">The rotation angle, in radians.</div>
  305. </td>
  306. </tr>
  307. <tr>
  308. <td class="attributes">&nbsp;</td>
  309. <td class="nameDescription">
  310. <div class="fixedFont">
  311. <b><a href="../symbols/pv.Label.html#textBaseline">textBaseline</a></b>
  312. </div>
  313. <div class="description">The vertical text alignment.</div>
  314. </td>
  315. </tr>
  316. <tr>
  317. <td class="attributes">&nbsp;</td>
  318. <td class="nameDescription">
  319. <div class="fixedFont">
  320. <b><a href="../symbols/pv.Label.html#textMargin">textMargin</a></b>
  321. </div>
  322. <div class="description">The text margin; may be specified in pixels, or in font-dependent units (such
  323. as ".1ex").</div>
  324. </td>
  325. </tr>
  326. <tr>
  327. <td class="attributes">&nbsp;</td>
  328. <td class="nameDescription">
  329. <div class="fixedFont">
  330. <b><a href="../symbols/pv.Label.html#textShadow">textShadow</a></b>
  331. </div>
  332. <div class="description">A list of shadow effects to be applied to text, per the CSS Text Level 3
  333. text-shadow property.</div>
  334. </td>
  335. </tr>
  336. <tr>
  337. <td class="attributes">&nbsp;</td>
  338. <td class="nameDescription">
  339. <div class="fixedFont">
  340. <b><a href="../symbols/pv.Label.html#textStyle">textStyle</a></b>
  341. </div>
  342. <div class="description">The text color.</div>
  343. </td>
  344. </tr>
  345. </tbody>
  346. </table>
  347. <dl class="inheritsList">
  348. <dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scene">scene</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
  349. </dl>
  350. <!-- ============================== methods summary ======================== -->
  351. <dl class="inheritsList">
  352. <dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#add">add</a>, <a href="../symbols/pv.Mark.html#anchor">anchor</a>, <a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#cousin">cousin</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#first">first</a>, <a href="../symbols/pv.Mark.html#last">last</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a>, <a href="../symbols/pv.Mark.html#sibling">sibling</a></dd>
  353. </dl>
  354. <!-- ============================== events summary ======================== -->
  355. <!-- ============================== constructor details ==================== -->
  356. <div class="details"><a name="constructor"> </a>
  357. <div class="sectionTitle">
  358. Class Detail
  359. </div>
  360. <div class="fixedFont">
  361. <b>pv.Label</b>()
  362. </div>
  363. <div class="description">
  364. Constructs a new label mark with default properties. Labels are not typically
  365. constructed directly, but by adding to a panel or an existing mark via
  366. <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
  367. </div>
  368. </div>
  369. <!-- ============================== field details ========================== -->
  370. <div class="sectionTitle">
  371. Field Detail
  372. </div>
  373. <a name="defaults"> </a>
  374. <div class="fixedFont">
  375. <span class="light">{<a href="../symbols/pv.Label.html">pv.Label</a>}</span>
  376. <b>defaults</b>
  377. </div>
  378. <div class="description">
  379. Default properties for labels. See the individual properties for the default
  380. values.
  381. </div>
  382. <hr />
  383. <a name="font"> </a>
  384. <div class="fixedFont">
  385. <span class="light">{string}</span>
  386. <b>font</b>
  387. </div>
  388. <div class="description">
  389. The font format, per the CSS Level 2 specification. The default font is "10px
  390. sans-serif", for consistency with the HTML 5 canvas element specification.
  391. Note that since text is not wrapped, any line-height property will be
  392. ignored. The other font-style, font-variant, font-weight, font-size and
  393. font-family properties are supported.
  394. </div>
  395. <dl class="detailList">
  396. <dt class="heading">See:</dt>
  397. <dd><a href="http://www.w3.org/TR/CSS2/fonts.html#font-shorthand">CSS2 fonts</a></dd>
  398. </dl>
  399. <hr />
  400. <a name="text"> </a>
  401. <div class="fixedFont">
  402. <span class="light">{string}</span>
  403. <b>text</b>
  404. </div>
  405. <div class="description">
  406. The character data to render; a string. The default value of the text
  407. property is the identity function, meaning the label's associated datum will
  408. be rendered using its <tt>toString</tt>.
  409. </div>
  410. <hr />
  411. <a name="textAlign"> </a>
  412. <div class="fixedFont">
  413. <span class="light">{string}</span>
  414. <b>textAlign</b>
  415. </div>
  416. <div class="description">
  417. The horizontal text alignment. One of:<ul>
  418. <li>left
  419. <li>center
  420. <li>right
  421. </ul>The default horizontal alignment is left.
  422. </div>
  423. <hr />
  424. <a name="textAngle"> </a>
  425. <div class="fixedFont">
  426. <span class="light">{number}</span>
  427. <b>textAngle</b>
  428. </div>
  429. <div class="description">
  430. The rotation angle, in radians. Text is rotated clockwise relative to the
  431. anchor location. For example, with the default left alignment, an angle of
  432. Math.PI / 2 causes text to proceed downwards. The default angle is zero.
  433. </div>
  434. <hr />
  435. <a name="textBaseline"> </a>
  436. <div class="fixedFont">
  437. <span class="light">{string}</span>
  438. <b>textBaseline</b>
  439. </div>
  440. <div class="description">
  441. The vertical text alignment. One of:<ul>
  442. <li>top
  443. <li>middle
  444. <li>bottom
  445. </ul>The default vertical alignment is bottom.
  446. </div>
  447. <hr />
  448. <a name="textMargin"> </a>
  449. <div class="fixedFont">
  450. <span class="light">{number}</span>
  451. <b>textMargin</b>
  452. </div>
  453. <div class="description">
  454. The text margin; may be specified in pixels, or in font-dependent units (such
  455. as ".1ex"). The margin can be used to pad text away from its anchor location,
  456. in a direction dependent on the horizontal and vertical alignment
  457. properties. For example, if the text is left- and middle-aligned, the margin
  458. shifts the text to the right. The default margin is 3 pixels.
  459. </div>
  460. <hr />
  461. <a name="textShadow"> </a>
  462. <div class="fixedFont">
  463. <span class="light">{string}</span>
  464. <b>textShadow</b>
  465. </div>
  466. <div class="description">
  467. A list of shadow effects to be applied to text, per the CSS Text Level 3
  468. text-shadow property. An example specification is "0.1em 0.1em 0.1em
  469. rgba(0,0,0,.5)"; the first length is the horizontal offset, the second the
  470. vertical offset, and the third the blur radius.
  471. </div>
  472. <dl class="detailList">
  473. <dt class="heading">See:</dt>
  474. <dd><a href="http://www.w3.org/TR/css3-text/#text-shadow">CSS3 text</a></dd>
  475. </dl>
  476. <hr />
  477. <a name="textStyle"> </a>
  478. <div class="fixedFont">
  479. <span class="light">{string}</span>
  480. <b>textStyle</b>
  481. </div>
  482. <div class="description">
  483. The text color. The name "textStyle" is used for consistency with "fillStyle"
  484. and "strokeStyle", although it might be better to rename this property (and
  485. perhaps use the same name as "strokeStyle"). The default color is black.
  486. </div>
  487. <dl class="detailList">
  488. <dt class="heading">See:</dt>
  489. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  490. </dl>
  491. <!-- ============================== method details ========================= -->
  492. <!-- ============================== event details ========================= -->
  493. <hr />
  494. </div>
  495. <!-- ============================== footer ================================= -->
  496. <div class="fineprint" style="clear:both">
  497. Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
  498. </div>
  499. </body>
  500. </html>