JqPlot chart plug-in learning yin and yang candle chart

JqPlot chart plug-in learning yin and yang candle chart
I. Preparations first, we need to download the required files from the official website: then, the reader needs to create a project based on his own situation and load the corresponding js and css in the following way (because the newly created Project in the VS2012 environment, in addition, the required js and css files are stored in the js and css folders. Correct the loading path as needed ). Copy code 1 <link href = "css/jquery.jqplot.min.css" rel = "stylesheet"/> 2 <script src = "js/jquery. min. js "> </script> 3 <script src =" js/jquery. jqplot. min. js "> </script> 4 5 <! -- [If lt IE 9]> 6 <script src = "js/excanvas. min. js"> </script> 7 <! [Endif] --> 8 <script src = "js/jqplot. dateAxisRenderer. min. js "> </script> 9 <script src =" js/jqplot. ohlcRenderer. min. js "> </script> 10 <script src =" js/jqplot. highlighter. min. js "> </script> copy the last three js files in the code under plugins. files in this folder will be frequently used in the future, because they are files required for many extension functions. In addition to referencing basic files, we also need to place a placeholder as a chart container. We need to place a DIV with the width of 500 and the height of 300: 1 <div id = "chart" style = "width: 500px; height: 300px;"> </div> 2. Today we will introduce a brand new chart, this chart is more industry-oriented. Its name is the yin and yang candle chart. Of course, we must first have a set of data so that we can use Jqplot to present the chart, the following figure shows the data to be used in the following example: copy the code var ohlc = [['2014/1/2 16:00:00 ', 06/15, 2009, 136.01, 139.5], ['2014/1/0 16:00:00 ', 06/08, 2009, 143.82, 144.56], ['2014/2/0 16:00:00', 136.04, 136.97, 06/01], ['2014/1/0 16:00:00 ', 05/26, 2009, 124.76, 135.9], ['2014/2/0 16:00:00', 124.55, 135.81, 05/18, 2009], ['2014/1/0 16:00:00 ', 05/11, 2009, 127.37, 130.96], ['2014/2/0 16:00:00', 119.38, 122.42, 05/04, 2009], ['2014/1/0 16:00:00 ', 04/27, 2009, 122.9, 127.95], ['2014/2/0 16:00:00', 122.66, 127.24, 04/20, 2009], ['2014/1/2 16:00:00 ', 04/13, 2009, 120.01, 124.25], ['2014/2 /2009 16:00:00 ', 114.94, 120,113.28, 119.57], ['2014/1/2 16:00:00', 03/30, 2009, 104.51, 116.13], ['2014/3/24/60 16:00:00 ', 102.61, 109.98, 101.75, 106.85], ['2014/1/2 16:00:00 ', 03/16, 2009, 96.53, 103.48], ['2014/2/0 16:00:00', 94.18, 101.59, 03/09, 2009, 95.93], ['2014/1/2 16:00:00 ', 03/02, 2009, 88.12, 92.77], ['2014/2/3 16:00:00', 82.33, 85.3, 02/23, 2009], ['2014/1/2 16:00:00 ', 96. 87, 97.04, 89, 91.2], ['2014/1/2 16:00:00 ', 02/09, 2009, 100,103], ['2014/2/24/60 16:00:00', 95.77, 99.16, 02/02, 2009, 99.72], ['2014/1/0 16:00:00 ', 01/26, 95, 2009, 88.86], ['2014/2/0 16:00:00', 88.3, 90, 90.13, 01/20], ['2014/1/0 16:00:00 ', 01/12, 2009, 90.46, 90.99], ['2014/2/0 16:00:00', 80.05, 82.33, 01/05, 2009], ['2014/1/2 16:00:00 ', 12/29, 2008, 86.52, 91.04], ['2014/2/3 16:00:00 ', 90.02, 90.03, 84.55, 85.81], ['2014/1/2 16:00:00 ', 12/15, 2008, 95.99, 90], ['2014/2/24/60 16:00:00', 96.48, 88.02, 12/08, 2008, 98.27], ['2014/1/2 16:00:00 ', 12/01, 2008, 91.3, 94], ['2014/2/3 16:00:00', 96.23, 86.5, 11/24, 2008], ['2014/1/0 16:00:00 ', 11/17, 2008, 88.48, 91.58], ['2014/2/0 16:00:00', 79.14, 82.58, 11/10, 2008], ['2014/1/2 16:00:00 ', 11/03, 2008, 105.93, 111.79], ['10 /27/2008 16:00:00 ', 95.07, 112.19, 91.86, 107.59], ['2014/1/2 16:00:00', 10/20, 2008, 99.78, 101.25], ['2014/3/24/60 16:00:00 ', 104.55, 116.4, 85.89, 97.4], ['2014/1/2 16:00:00 ', 10/06, 2008, 85, 91.96], ['2014/2/24/60 16:00:00', 101.5, 96.8, 09/29, 2008, 97.07], ['2014/1/0 16:00:00 ', 09/22, 2008, 139.94], ['2014/2/0 16:00:00', 140.25, 123,128.24, 09/15, 2008]; after copying the Code with this set of data, we can start to complete the chart, Since it is a new chart, we need to use a new engine. I believe that readers who have learned a few articles can find that today we need to use the OHLCRenderer engine, while the X axis still uses the DteAxisRenderer engine, after all, it is time. The following code is used to create a chart shown in Figure 1.1: Copy code 1 $. jqplot ('chart', [ohlc], {2 title: "图", 3 seriesDefaults: {yaxis: "y2axis"}, 4 axes: {5 xaxis: {6 renderer: $. jqplot. dateAxisRenderer, 7 tickOptions: {formatString: "% B % e"}, 8 min: "09-01-2008", 9 max: "06-22-2009", 10 tickInterval: "5 weeks" 11}, 12 y2axis: {13 tickOptions: {formatString: "$ % d"} 14} 15}, 16 series: [{renderer: $. jqplot. OHLCRenderer }], 17 highlighter: {18 show: true, 19 showMarker: false, 20 tooltipAxes: "xy", 21 yvalues: 4,22 formatString: '<table class = "jqplot-highlighter"> \ 23 <tr> <td> date: </td> <td> % s </td> </tr> \ 24 <tr> <td> open: </td> <td> % s </td> </tr> \ 25 <tr> <td> hi: </td> <td> % s </td> </tr> \ 26 <tr> <td> low: </td> <td> % s </td> </tr> \ 27 <tr> <td> close: </td> <td> % s </td> </tr> </table> '28} 29 }); copy the code. seriesDefaults indicates that the data displayed on the Y axis is placed on the Y axis on the right, and xa under the axes In xis, min and max are used to specify the maximum and minimum dates displayed on the X axis, and tickInterval is used to specify that our interval is 6 weeks, another new feature is that the prompt box format can be customized. Here we use formatString of highlighter, but it is useless to specify it by light, we also need to tell it how to present this custom prompt, so we also need to use tooltipAxes to specify the data to be obtained and presented from the X axis to the Y axis, in addition, get the first placeholder for filling the formatString from the X axis, and use the Y axis to get four values in order to fill the space. The 4 values are specified by yvalues, in this way, we can customize the prompt. Figure 1.1 in this figure, each vertical line has two small horizontal bars, indicating the starting and closing prices respectively, while the two ends of the vertical line represent the lowest and highest prices, however, we can't intuitively see the starting and closing prices through this figure, so we can also specify another parameter to convert them from a small horizontal line to a rectangle, in this way, we can intuitively see the effect of Figure 1.2: Copy code 1 $. jqplot ('chart', [ohlc], {2 title: "图", 3 seriesDefaults: {yaxis: "y2axis"}, 4 axes: {5 xaxis: {6 renderer: $. jqplot. dateAxisRenderer, 7 tickOptions: {formatString: "% B % e"}, 8 min: "09-01-2008 16:00", 9 max: "06-22-2009 16:00", 10 tickInterval: "5 week S "11}, 12 y2axis: {13 tickOptions: {formatString:" $ % d "} 14} 15}, 16 series: [{17 renderer: $. jqplot. OHLCRenderer, 18 rendererOptions: {19 candleStick: true20} 21}], 22 highlighter: {23 show: true, 24 showMarker: false, 25 tooltipAxes: "xy", 26 yvalues: 4,27 formatString: '<table class = "jqplot-highlighter"> \ 28 <tr> <td> date: </td> <td> % s </td> </tr> \ 29 <tr> <td> open: </td> <td> % s </td> </tr> \ 30 <tr> <td> hi: </td> <Td> % s </td> </tr> \ 31 <tr> <td> low: </td> <td> % s </td> </tr> \ 32 <tr> <td> close: </td> <td> % s </td> </tr> </table> '33} 34 }); copy the code. Here we only set the "candleStick" attribute of rendererOptions to "true" in series.