我如何使用高图显示小值烛台

How do I use Highcharts to display candlestick with small values?

本文关键字：显示 何使用 高图      更新时间：2023-09-26

我试图显示一个小值的烛台，但我无法在图表上看到蜡烛。

下面是一个例子:

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,
            }]
        });
        }
    });

您应该使用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,
         }]
     });
 }
 });
相关文章：