include/lib/jqplot/docs/files/optionsTutorial-txt.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

<html><head><title>Options Tutorial</title><link rel="stylesheet" type="text/css" href="../styles/main.css"><script language=JavaScript src="../javascript/main.js"></script><script language=JavaScript src="../javascript/searchdata.js"></script></head><body class="ContentPage" onLoad="NDOnLoad()"><script language=JavaScript><!--
if (browserType) {document.write("<div class=" + browserType + ">");if (browserVer) {document.write("<div class=" + browserVer + ">"); }}// --></script>

<!--  Generated by Natural Docs, version 1.4 -->
<!--  http://www.naturaldocs.org  -->

<!-- saved from url=(0026)http://www.naturaldocs.org -->




<div id=Content><div class="CSection"><div class=CTopic id=MainTopic><div class="CTitle logo"><div class="nav"><a class="nav" href="../../index.php"><span>&gt;</span>Home</a><a class="nav"  href="../../tests/"><span>&gt;</span>Examples</a><a class="nav"  href="../../docs/"><span>&gt;</span>Docs</a><a class="nav"  href="http://bitbucket.org/cleonello/jqplot/downloads/"><span>&gt;</span>Download</a><a class="nav" href="../../info.php"><span>&gt;</span>Info</a><a class="nav"  href="../../donate.php"><span>&gt;</span>Donate</a></div><a name="Options_Tutorial"></a>Options Tutorial</div><div class=CBody><p>This document will help you understand how jqPlot&rsquo;s options relate to the API documentation and the jqPlot object itself.&nbsp;  For a listing of options available to jqPlot, see <a href="jqPlotOptions-txt.html#jqPlot_Options" class=LSection id=link1 onMouseOver="ShowTip(event, 'tt1', 'link1')" onMouseOut="HideTip('tt1')">jqPlot Options</a> in the jqPlotOptions.txt file.</p><p>The key to effectively using jqPlot is understanding jqPlot&rsquo;s options.&nbsp;  The online documentation is API documentation.&nbsp;  While it explains what attributes and methods various objects posses, it doesn&rsquo;t explain how to use or set those attributes through options.&nbsp;  This tutorial will help explain that.</p><p>Lets assume you are creating a plot like this:</p><blockquote><pre>chart = $.jqplot('chart', dataSeries, optionsObj);</pre></blockquote><p>First, note that you shouldn&rsquo;t try to directly set attributes on the &ldquo;chart&rdquo; object (like chart.grid.shadow) after your call to $.jqplot().&nbsp; At best this won&rsquo;t do anything **(see below).&nbsp; You should pass options in via the &ldquo;optionsObj&rdquo;.</p><p>the optionsObj really represents the plot object (jqPlot object, not to be confused with the $.jqplot function which will create a jqPlot object).&nbsp;  Attributes you specify on that object will be merged with attributes in the jqPlot object.&nbsp;  The axes, legend, series, etc. are attributes on the jqPlot object.&nbsp;  The jqPlot/optionsObj object looks something like (only some attributes shown):</p><blockquote><pre>jqPlot-|
       |-seriesColors
       |-textColor
       |-fontFamily
       |-fontSize
       |-stackSeries
       |-series(Array)-|
       |               |-Series1-|
       |               |         |-lineWidth
       |               |         |-linePattern
       |               |         |-shadow
       |               |         |-showLine
       |               |         |-showMarker
       |               |         |-color
       |               |-Series2...
       |               |-...
       |               |-SeriesN
       |
       |-grid(Object)-|
       |              |-drawGridLines
       |              |-background
       |              |-borderColor
       |              |-borderWidth
       |              |-shadow
       |
       |-title(Object)-|
       |               |-text
       |               |-show
       |               |-fontFamily
       |               |-fontSize
       |               |-textAlign
       |               |-textColor
       |
       |-axes(Object)-|
       |              |-xais-|
       |              |      |-min
       |              |      |-max
       |              |      |-numberTicks
       |              |      |-showTicks
       |              |      |-showTickMarks
       |              |      |-pad
       |
       | ... and so on</pre></blockquote><p>The optionsObj should follow the same construction as if it were a jqPlot object (with some exceptions/shortcuts I&rsquo;ll mention in a moment).&nbsp;  So generally, when you see something like &ldquo;this.drawGridLines&rdquo; in the grid properties in the docs, just replace &ldquo;this&rdquo; with &ldquo;grid&rdquo; in your options object.&nbsp;  So it becomes optionsObj.grid.drawGridLines.&nbsp;  Do likewise with the other objects in the plot, replacing &ldquo;this&rdquo;, with the respective attribute on the plot like &ldquo;legend&rdquo; or &ldquo;title&rdquo;.&nbsp;  Series and Axes are handled a little different, because series is an array and axes has 4 distinct children &ldquo;xaxis&rdquo;, &ldquo;yaxis&rdquo;, &ldquo;x2axis&rdquo; and &ldquo;y2axis&rdquo;.</p><p>So, to remove the shadow from the grid and change the grid border size you would do:</p><blockquote><pre>optionObj = {grid:{shadow:false, borderWidth:9.0}};</pre></blockquote><p>To do the same as above but also make all the text in the plot red you would do:</p><blockquote><pre>optionObj = {
   textColor:&quot;#ff0000&quot;,
   grid:{shadow:false, borderWidth:9.0}
}</pre></blockquote><p>Here is a more deeply nested example.&nbsp; Say you want to specify a min and max on your y axis and use a specific color for your second series.&nbsp;  That would look like:</p><blockquote><pre>optionsObj = {
   axes:{yaxis:{min:5, max:230}},