2015-09-26 83 views
0

我想在我的rails webapp上使用highcharts。我对此完全陌生。我将如何将下来的蜡烛棒的颜色改为红色,上升的蜡烛棒是否会变成绿色?更改颜色并使用设置API

这是我有:

$(function() { 
 
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) { 
 

 
     // split the data set into ohlc and volume 
 
     var ohlc = [], 
 
      volume = [], 
 
      dataLength = data.length, 
 
      // set the allowed units for data grouping 
 
      groupingUnits = [[ 
 
       'week',       // unit name 
 
       [1]        // allowed multiples 
 
      ], [ 
 
       'month', 
 
       [1, 2, 3, 4, 6] 
 
      ]], 
 

 
      i = 0; 
 

 
     for (i; i < dataLength; i += 1) { 
 
      ohlc.push([ 
 
       data[i][0], // the date 
 
       data[i][1], // open 
 
       data[i][2], // high 
 
       data[i][3], // low 
 
       data[i][4] // close 
 
      ]); 
 

 
      volume.push([ 
 
       data[i][0], // the date 
 
       data[i][5] // the volume 
 
      ]); 
 
     } 
 

 

 
     // create the chart 
 
     $('#container').highcharts('StockChart', { 
 

 
      rangeSelector: { 
 
       selected: 1 
 
      }, 
 

 
      title: { 
 
       text: 'AAPL Historical' 
 
      }, 
 

 
      yAxis: [{ 
 
       labels: { 
 
        align: 'right', 
 
        x: -3 
 
       }, 
 
       title: { 
 
        text: 'OHLC' 
 
       }, 
 
       height: '60%', 
 
       lineWidth: 2 
 
      }, { 
 
       labels: { 
 
        align: 'right', 
 
        x: -3 
 
       }, 
 
       title: { 
 
        text: 'Volume' 
 
       }, 
 
       top: '65%', 
 
       height: '35%', 
 
       offset: 0, 
 
       lineWidth: 2 
 
      }], 
 

 
      series: [{ 
 
       type: 'candlestick', 
 
       name: 'AAPL', 
 
       data: ohlc, 
 
       dataGrouping: { 
 
        units: groupingUnits 
 
       } 
 
      }, { 
 
       type: 'column', 
 
       name: 'Volume', 
 
       data: volume, 
 
       yAxis: 1, 
 
       dataGrouping: { 
 
        units: groupingUnits 
 
       } 
 
      }] 
 
     }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
 
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 
 

 
<div id="container" style="height: 400px; min-width: 310px"></div>

如果我加载:http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?我可以计算出第一个数字的所有数字,这代表了什么?莫名其妙?

我怎样才能使用rails为highcharts创建一个JSON,以便我可以看到每分钟的更新。


我的问题:

  • 我怎样才能改变烛台的颜色?

  • 如何制作此代码可以获取的API以显示一年中每一分钟的烛台?

  • 如何更新此代码以显示分钟烛台而不是每日烛台?

非常感谢。

如果我不够清楚,请让我知道。

回答

1

要更改颜色,请使用colorupColor

我不是Rails的开发,但是回答其他问题:

  • 在JS使用setInterval()通过AJAX从后端获取数据
  • 基于分钟,烛台,只需提供具有时间戳数据每一分钟。在这个例子中,数据是基于每日的。

关于数据格式:[1222646400000,17.09,17.10,14.37,15.04,655513663]

首先一个是在毫秒的时间戳,接下来的四个值是开放 - 高 - 低 - 关闭,最后一个是用于第二窗格体积。

我强烈建议阅读教程:

我敢肯定,在Rails的生成JSON不能硬。