pv.Bar.html 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737
  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.Bar</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.Bar
  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 bar: an axis-aligned rectangle that can be stroked and
  216. filled. Bars are used for many chart types, including bar charts, histograms
  217. and Gantt charts. Bars can also be used as decorations, for example to draw a
  218. frame border around a panel; in fact, a panel is a special type (a subclass)
  219. of bar.
  220. <p>Bars can be positioned in several ways. Most commonly, one of the four
  221. corners is fixed using two margins, and then the width and height properties
  222. determine the extent of the bar relative to this fixed location. For example,
  223. using the bottom and left properties fixes the bottom-left corner; the width
  224. then extends to the right, while the height extends to the top. As an
  225. alternative to the four corners, a bar can be positioned exclusively using
  226. margins; this is convenient as an inset from the containing panel, for
  227. example. See <a href="../symbols/pv.Mark.html">pv.Mark</a> for details on the prioritization of redundant
  228. positioning properties.
  229. <p>See also the <a href="../../api/Bar.html">Bar guide</a>.
  230. <br /><i>Defined in: </i> <a href="../symbols/src/mark_Bar.js.html">Bar.js</a>.
  231. </p>
  232. <!-- ============================== constructor summary ==================== -->
  233. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Bar.">
  234. <caption>Class Summary</caption>
  235. <thead>
  236. <tr>
  237. <th scope="col">Constructor Attributes</th>
  238. <th scope="col">Constructor Name and Description</th>
  239. </tr>
  240. </thead>
  241. <tbody>
  242. <tr>
  243. <td class="attributes">&nbsp;</td>
  244. <td class="nameDescription" >
  245. <div class="fixedFont">
  246. <b><a href="../symbols/pv.Bar.html#constructor">pv.Bar</a></b>()
  247. </div>
  248. <div class="description">Constructs a new bar mark with default properties.</div>
  249. </td>
  250. </tr>
  251. </tbody>
  252. </table>
  253. <!-- ============================== properties summary ===================== -->
  254. <table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Bar.">
  255. <caption>Field Summary</caption>
  256. <thead>
  257. <tr>
  258. <th scope="col">Field Attributes</th>
  259. <th scope="col">Field Name and Description</th>
  260. </tr>
  261. </thead>
  262. <tbody>
  263. <tr>
  264. <td class="attributes">&nbsp;</td>
  265. <td class="nameDescription">
  266. <div class="fixedFont">
  267. <b><a href="../symbols/pv.Bar.html#defaults">defaults</a></b>
  268. </div>
  269. <div class="description">Default properties for bars.</div>
  270. </td>
  271. </tr>
  272. <tr>
  273. <td class="attributes">&nbsp;</td>
  274. <td class="nameDescription">
  275. <div class="fixedFont">
  276. <b><a href="../symbols/pv.Bar.html#fillStyle">fillStyle</a></b>
  277. </div>
  278. <div class="description">The bar fill style; if non-null, the interior of the bar is filled with the
  279. specified color.</div>
  280. </td>
  281. </tr>
  282. <tr>
  283. <td class="attributes">&nbsp;</td>
  284. <td class="nameDescription">
  285. <div class="fixedFont">
  286. <b><a href="../symbols/pv.Bar.html#height">height</a></b>
  287. </div>
  288. <div class="description">The height of the bar, in pixels.</div>
  289. </td>
  290. </tr>
  291. <tr>
  292. <td class="attributes">&nbsp;</td>
  293. <td class="nameDescription">
  294. <div class="fixedFont">
  295. <b><a href="../symbols/pv.Bar.html#lineWidth">lineWidth</a></b>
  296. </div>
  297. <div class="description">The width of stroked lines, in pixels; used in conjunction with
  298. <tt>strokeStyle</tt> to stroke the bar's border.</div>
  299. </td>
  300. </tr>
  301. <tr>
  302. <td class="attributes">&nbsp;</td>
  303. <td class="nameDescription">
  304. <div class="fixedFont">
  305. <b><a href="../symbols/pv.Bar.html#strokeStyle">strokeStyle</a></b>
  306. </div>
  307. <div class="description">The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  308. stroke the bar's border.</div>
  309. </td>
  310. </tr>
  311. <tr>
  312. <td class="attributes">&nbsp;</td>
  313. <td class="nameDescription">
  314. <div class="fixedFont">
  315. <b><a href="../symbols/pv.Bar.html#width">width</a></b>
  316. </div>
  317. <div class="description">The width of the bar, in pixels.</div>
  318. </td>
  319. </tr>
  320. </tbody>
  321. </table>
  322. <dl class="inheritsList">
  323. <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>
  324. </dl>
  325. <!-- ============================== methods summary ======================== -->
  326. <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Bar.">
  327. <caption>Method Summary</caption>
  328. <thead>
  329. <tr>
  330. <th scope="col">Method Attributes</th>
  331. <th scope="col">Method Name and Description</th>
  332. </tr>
  333. </thead>
  334. <tbody>
  335. <tr>
  336. <td class="attributes">&nbsp;</td>
  337. <td class="nameDescription">
  338. <div class="fixedFont"><b><a href="../symbols/pv.Bar.html#anchor">anchor</a></b>(name)
  339. </div>
  340. <div class="description">Constructs a new bar anchor with default properties.</div>
  341. </td>
  342. </tr>
  343. </tbody>
  344. </table>
  345. <dl class="inheritsList">
  346. <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#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>
  347. </dl>
  348. <!-- ============================== events summary ======================== -->
  349. <!-- ============================== constructor details ==================== -->
  350. <div class="details"><a name="constructor"> </a>
  351. <div class="sectionTitle">
  352. Class Detail
  353. </div>
  354. <div class="fixedFont">
  355. <b>pv.Bar</b>()
  356. </div>
  357. <div class="description">
  358. Constructs a new bar mark with default properties. Bars are not typically
  359. constructed directly, but by adding to a panel or an existing mark via
  360. <a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
  361. </div>
  362. </div>
  363. <!-- ============================== field details ========================== -->
  364. <div class="sectionTitle">
  365. Field Detail
  366. </div>
  367. <a name="defaults"> </a>
  368. <div class="fixedFont">
  369. <span class="light">{<a href="../symbols/pv.Bar.html">pv.Bar</a>}</span>
  370. <b>defaults</b>
  371. </div>
  372. <div class="description">
  373. Default properties for bars. By default, there is no stroke and the fill
  374. style is a categorical color.
  375. </div>
  376. <hr />
  377. <a name="fillStyle"> </a>
  378. <div class="fixedFont">
  379. <span class="light">{string}</span>
  380. <b>fillStyle</b>
  381. </div>
  382. <div class="description">
  383. The bar fill style; if non-null, the interior of the bar is filled with the
  384. specified color. The default value of this property is a categorical color.
  385. </div>
  386. <dl class="detailList">
  387. <dt class="heading">See:</dt>
  388. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  389. </dl>
  390. <hr />
  391. <a name="height"> </a>
  392. <div class="fixedFont">
  393. <span class="light">{number}</span>
  394. <b>height</b>
  395. </div>
  396. <div class="description">
  397. The height of the bar, in pixels. If the bottom position is specified, the
  398. bar extends upward from the bottom edge; if the top position is specified,
  399. the bar extends downward from the top edge.
  400. </div>
  401. <hr />
  402. <a name="lineWidth"> </a>
  403. <div class="fixedFont">
  404. <span class="light">{number}</span>
  405. <b>lineWidth</b>
  406. </div>
  407. <div class="description">
  408. The width of stroked lines, in pixels; used in conjunction with
  409. <tt>strokeStyle</tt> to stroke the bar's border.
  410. </div>
  411. <hr />
  412. <a name="strokeStyle"> </a>
  413. <div class="fixedFont">
  414. <span class="light">{string}</span>
  415. <b>strokeStyle</b>
  416. </div>
  417. <div class="description">
  418. The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
  419. stroke the bar's border. The default value of this property is null, meaning
  420. bars are not stroked by default.
  421. </div>
  422. <dl class="detailList">
  423. <dt class="heading">See:</dt>
  424. <dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
  425. </dl>
  426. <hr />
  427. <a name="width"> </a>
  428. <div class="fixedFont">
  429. <span class="light">{number}</span>
  430. <b>width</b>
  431. </div>
  432. <div class="description">
  433. The width of the bar, in pixels. If the left position is specified, the bar
  434. extends rightward from the left edge; if the right position is specified, the
  435. bar extends leftward from the right edge.
  436. </div>
  437. <!-- ============================== method details ========================= -->
  438. <div class="sectionTitle">
  439. Method Detail
  440. </div>
  441. <a name="anchor"> </a>
  442. <div class="fixedFont">
  443. <span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
  444. <b>anchor</b>(name)
  445. </div>
  446. <div class="description">
  447. Constructs a new bar anchor with default properties. Bars support five
  448. different anchors:<ul>
  449. <li>top
  450. <li>left
  451. <li>center
  452. <li>bottom
  453. <li>right
  454. </ul>In addition to positioning properties (left, right, top bottom), the
  455. anchors support text rendering properties (text-align, text-baseline). Text
  456. is rendered to appear inside the bar.
  457. <p>To facilitate stacking of bars, the anchors are defined in terms of their
  458. opposite edge. For example, the top anchor defines the bottom property, such
  459. that the bar grows upwards; the bottom anchor instead defines the top
  460. property, such that the bar grows downwards. Of course, in general it is more
  461. robust to use panels and the cousin accessor to define stacked bars; see
  462. <a href="../symbols/pv.Mark.html#scene">pv.Mark#scene</a> for an example.
  463. <p>Bar anchors also "smartly" specify position properties based on whether
  464. the derived mark type supports the width and height properties. If the
  465. derived mark type does not support these properties (e.g., dots), the
  466. position will be centered on the corresponding edge. Otherwise (e.g., bars),
  467. the position will be in the opposite side.
  468. </div>
  469. <dl class="detailList">
  470. <dt class="heading">Parameters:</dt>
  471. <dt>
  472. <span class="light fixedFont">{string}</span> <b>name</b>
  473. </dt>
  474. <dd>the anchor name; either a string or a property function.</dd>
  475. </dl>
  476. <dl class="detailList">
  477. <dt class="heading">Returns:</dt>
  478. <dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> </dd>
  479. </dl>
  480. <!-- ============================== event details ========================= -->
  481. <hr />
  482. </div>
  483. <!-- ============================== footer ================================= -->
  484. <div class="fineprint" style="clear:both">
  485. 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)
  486. </div>
  487. </body>
  488. </html>