问题描述

jqplot 如何实现绿涨红跌的效果

本人正在使用jqplot 制作金融行情图，想实现‘绿涨红跌’的效果，但是jqplot 文档里翻了好几遍只能更改全部蜡烛图的颜色，无法根据涨跌情况进行变化，不知道哪位大神能够给予指导。以下是jqplot 的配置代码。

 $(document).ready(function(){              var plot2 = $.jqplot('chart2'[ohlc]{http://ask.csdn.net/#    seriesDefaults:{yaxis:'y2axis'}    axes: {      xaxis: {        renderer:$.jqplot.DateAxisRenderer        min: ""16:20:00""        max: ""16:59:00""        tickInterval: ""5 minutes""        tickOptions:{            formatString:'%H:%M'            fontSize:'10px'        }      }      y2axis: {        tickOptions:{            formatString:'%d'            fontSize:'10px'        }      }    }    // To make a candle stick chart set the ""candleStick"" option to true.    series: [      {        color: '#33AA11'        renderer:$.jqplot.OHLCRenderer         rendererOptions:{ candleStick:true }      }    ]    grid: {        drawGridLines: true // wether to draw lines across the grid or not.        gridLineColor: '#33AA11' //设置整个图标区域网格背景线的颜色        background: '#fffdf6' //设置整个图标区域的背景色        borderColor: '#999999' //设置图表的(最外侧)边框的颜色        borderWidth: 2.0 //设置图表的(最外侧)边框宽度        }    highlighter: {      show: true      showMarker:false      tooltipAxes: 'xy'      yvalues: 4      formatString:'<table class=""jqplot-highlighter"">       <tr><td>时间:</td><td>%s</td></tr>       <tr><td>开盘:</td><td>%s</td></tr>       <tr><td>最高:</td><td>%s</td></tr>       <tr><td>最低:</td><td>%s</td></tr>       <tr><td>收盘:</td><td>%s</td></tr></table>'    }  });});

解决方案

补充以下数据源

 //分钟级数据源ohlc = [['16:01:00' 135.01 139.5 134.53 139.48]['16:02:00' 143.82 144.56 136.04 136.97]['16:03:00' 136.47 146.4 136 144.67]['16:04:00' 124.76 135.9 124.55 135.81]['16:05:00' 123.73 129.31 121.57 122.5]['16:06:00' 127.37 130.96 119.38 122.42]['16:07:00' 128.24 133.5 126.26 129.19]['16:08:00' 122.9 127.95 122.66 127.24]['16:09:00' 121.73 127.2 118.6 123.9]['16:10:00' 120.01 124.25 115.76 123.42]['16:11:00' 114.94 120 113.28 119.57]['16:12:00' 104.51 116.13 102.61 115.99]['16:13:00' 102.71 109.98 101.75 106.85]['16:14:00' 96.53 103.48 94.18 101.59]['16:15:00' 84.18 97.2 82.57 95.93]['16:16:00' 88.12 92.77 82.33 85.3]['16:17:00' 91.65 92.92 86.51 89.31]['16:18:00' 96.87 97.04 89 91.2]['16:19:00' 100 103 95.77 99.16]['16:20:00' 89.1 100 88.9 99.72]['16:21:00' 88.86 95 88.3 90.13]['16:22:00' 81.93 90 78.2 88.36]['16:23:00' 83.46 90.99 80.05 82.33]['16:24:00' 93.17 97.17 90.04 90.58]['16:25:00' 86.52 91.04 84.72 90.75]['16:26:00' 90.02 90.03 84.55 85.81]['16:27:00' 95.99 96.48 88.02 90]['16:28:00' 97.28 103.6 92.53 98.27]['16:29:00' 91.3 96.23 86.5 94]['16:30:00' 85.21 95.25 84.84 92.67]['16:31:00' 88.48 91.58 79.14 82.58]['16:32:00' 100.17 100.4 86.02 90.24]['16:33:00' 105.93 111.79 95.72 98.24]['16:34:00' 95.07 112.19 91.86 107.59]['16:35:00' 99.78 101.25 90.11 96.38]['16:36:00' 104.55 116.4 85.89 97.4]['16:37:00' 91.96 101.5 85 96.8]['16:38:00' 119.62 119.68 94.65 97.07]['16:39:00' 139.94 140.25 123 128.24]['16:40:00' 142.03 147.69 120.68 140.91]['16:41:00' 81.93 90 78.2 88.36]['16:42:00' 90.46 90.99 80.05 82.33]['16:43:00' 93.17 97.17 90.04 90.58]['16:44:00' 86.52 91.04 84.72 90.75]['16:45:00' 90.02 90.03 84.55 85.81]['16:46:00' 95.99 96.48 88.02 90]['16:47:00' 97.28 103.6 92.53 98.27]['16:48:00' 91.3 96.23 86.5 94]['16:49:00' 85.21 95.25 84.84 92.67]['16:50:00' 88.48 91.58 79.14 82.58]    ['16:51:00' 100.17 100.4 86.02 90.24]['16:52:00' 105.93 111.79 95.72 98.24]['16:53:00' 95.07 112.19 91.86 107.59]['16:54:00' 99.78 101.25 90.11 96.38]['16:55:00' 104.55 116.4 85.89 97.4]['16:56:00' 91.96 101.5 85 96.8]['16:57:00' 119.62 119.68 94.65 97.07]['16:58:00' 139.94 140.25 123 128.24]['16:59:00' 142.03 147.69 120.68 140.91]];

html代码：

  <div id=""main""><div class=""jqplot-target"" id=""chart2"" style=""height: 200px; width: 420px; margin:80px; position: relative;""><div style=""position: absolute; display: none;"" class=""jqplot-highlighter-tooltip""></div></div>