如何使用Highcharts顯示小值的燭臺？

我想顯示一個小值的燭臺，但在圖表上看不到蠟燭。如何使用Highcharts顯示小值的燭臺？

下面是一個例子：

HTML：

<div class="graphs"> 
     <div id="chartEURUSDContainer" style="height: 331px; min-width: 611px"></div> 
</div> 


<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

的Javascript：

$(function() { 

     var jsonData = [{"LastModification":"04:18:45","Symbol":"EURUSD","Bid":"1.33132","Ask":"1.33157","High":"1.33336","Low":"1.33007","Direction":"0","InserTime":"\/Date(1358760060933)\/"},{"LastModification":"04:20:05","Symbol":"EURUSD","Bid":"1.33151","Ask":"1.33174","High":"1.33336","Low":"1.33007","Direction":"0","InserTime":"\/Date(1358760140625)\/"},{"LastModification":"04:21:25","Symbol":"EURUSD","Bid":"1.3312","Ask":"1.33144","High":"1.33336","Low":"1.33007","Direction":"1","InserTime":"\/Date(1358760220731)\/"},{"LastModification":"04:22:48","Symbol":"EURUSD","Bid":"1.33115","Ask":"1.33141","High":"1.33336","Low":"1.33007","Direction":"-1","InserTime":"\/Date(1358760300387)\/"},{"LastModification":"04:23:48","Symbol":"EURUSD","Bid":"1.33107","Ask":"1.33132","High":"1.33336","Low":"1.33007","Direction":"-1","InserTime":"\/Date(1358760361033)\/"},{"LastModification":"04:25:08","Symbol":"EURUSD","Bid":"1.33139","Ask":"1.33164","High":"1.33336","Low":"1.33007","Direction":"0","InserTime":"\/Date(1358760440193)\/"},{"LastModification":"04:26:28","Symbol":"EURUSD","Bid":"1.33202","Ask":"1.33222","High":"1.33336","Low":"1.33007","Direction":"1","InserTime":"\/Date(1358760520037)\/"},{"LastModification":"04:27:48","Symbol":"EURUSD","Bid":"1.33212","Ask":"1.33238","High":"1.33336","Low":"1.33007","Direction":"-1","InserTime":"\/Date(1358760600163)\/"}] 

     var data = []; 

     fillData();  

     function fillData() { 
      for (i = 0; i < jsonData.length; i++) { 
       data.push([ 
        parseInt(jsonData[i].InserTime.substr(6)), 
        jsonData[i].Ask , 
        jsonData[i].High , 
        jsonData[i].Low , 
        jsonData[i].Bid 
        ]); 
      } 
      CreateChart(); 
     } 

     function CreateChart() {   
     // create the chart 
     chart = new Highcharts.StockChart({ 
      chart: { 
       renderTo: 'chartEURUSDContainer', 
       type: 'candlestick', 
       marginRight: 10,     
      }, 
      rangeSelector : { 
       enabled: false 
      },  
      scrollbar : { 
       enabled: false 
      },    
      navigator : { 
       enabled: false 
      }, 
      series : [{ 
       type : 'candlestick', 
       color: '#00FF00', 
       name : 'Currency Rates', 
       data : data, 

      }] 
     }); 
     } 
    });

Live example on JS Fiddle。

來源

2013-01-21 Reno

這是代碼示例http://jsfiddle.net/Jj3Ws/ – Reno

如果您收到一條錯誤消息，指出不包含JS代碼無法提供的JS Fiddle鏈接，那就鼓勵您通過在此處包含代碼來減少*外部依賴關係* ;它不鼓勵你通過使用JS Fiddle的重定向鏈接來增加外部依賴。如果* JS * Fiddle *或* AltURL發生故障，您的問題就會失效。我現在修復了這個問題。 – TRiG

您應該使用parseFloat（）將字符串更改爲Ask/High值的數字。

data.push([ 
     parseInt(jsonData[i].InserTime.substr(6)), 
     parseFloat(jsonData[i].Ask), 
     parseFloat(jsonData[i].High), 
     parseFloat(jsonData[i].Low), 
     parseFloat(jsonData[i].Bid)]);

這裏有一個完整的例子：

HTML：

<div class="graphs"> 
    <div id="chartEURUSDContainer" style="height: 331px; min-width: 611px"></div> 
</div> 
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" 
type="text/javascript"></script> 
<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>

的Javascript：

$(function() { 

    var jsonData = [{ 
     "LastModification": "04:18:45", 
     "Symbol": "EURUSD", 
     "Bid": "1.33132", 
     "Ask": "1.33157", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "0", 
     "InserTime": "\/Date(1358760060933)\/" 
    }, { 
     "LastModification": "04:20:05", 
     "Symbol": "EURUSD", 
     "Bid": "1.33151", 
     "Ask": "1.33174", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "0", 
     "InserTime": "\/Date(1358760140625)\/" 
    }, { 
     "LastModification": "04:21:25", 
     "Symbol": "EURUSD", 
     "Bid": "1.3312", 
     "Ask": "1.33144", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "1", 
     "InserTime": "\/Date(1358760220731)\/" 
    }, { 
     "LastModification": "04:22:48", 
     "Symbol": "EURUSD", 
     "Bid": "1.33115", 
     "Ask": "1.33141", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "-1", 
     "InserTime": "\/Date(1358760300387)\/" 
    }, { 
     "LastModification": "04:23:48", 
     "Symbol": "EURUSD", 
     "Bid": "1.33107", 
     "Ask": "1.33132", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "-1", 
     "InserTime": "\/Date(1358760361033)\/" 
    }, { 
     "LastModification": "04:25:08", 
     "Symbol": "EURUSD", 
     "Bid": "1.33139", 
     "Ask": "1.33164", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "0", 
     "InserTime": "\/Date(1358760440193)\/" 
    }, { 
     "LastModification": "04:26:28", 
     "Symbol": "EURUSD", 
     "Bid": "1.33202", 
     "Ask": "1.33222", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "1", 
     "InserTime": "\/Date(1358760520037)\/" 
    }, { 
     "LastModification": "04:27:48", 
     "Symbol": "EURUSD", 
     "Bid": "1.33212", 
     "Ask": "1.33238", 
     "High": "1.33336", 
     "Low": "1.33007", 
     "Direction": "-1", 
     "InserTime": "\/Date(1358760600163)\/" 
    }] 

    var data = []; 

    fillData(); 

    function fillData() { 
     for (i = 0; i < jsonData.length; i++) { 
      data.push([ 
      parseInt(jsonData[i].InserTime.substr(6)), 
      parseFloat(jsonData[i].Ask), 
      parseFloat(jsonData[i].High), 
      parseFloat(jsonData[i].Low), 
      parseFloat(jsonData[i].Bid)]); 
} 
CreateChart(); 
} 

function CreateChart() { 
    // create the chart 
    chart = new Highcharts.StockChart({ 
     chart: { 
      renderTo: 'chartEURUSDContainer', 
      type: 'candlestick', 
      marginRight: 10, 
     }, 
     rangeSelector: { 
      enabled: false 
     }, 
     scrollbar: { 
      enabled: false 
     }, 
     navigator: { 
      enabled: false 
     }, 
     series: [{ 
      type: 'candlestick', 
      color: '#00FF00', 
      name: 'Currency Rates', 
      data: data, 

     }] 
    }); 
} 
});

Demo on JS Fiddle。

來源

2013-02-01 09:12:28

如何使用Highcharts顯示小值的燭臺？

回答

相關問題