2015-09-26 86 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不能硬。