javascript - 如何使用 Highcharts 显示小值的烛台？-6ren

javascript - 如何使用 Highcharts 显示小值的烛台？

转载作者：行者123 更新时间：2023-11-29 10:48:40

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

这是一个例子:

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 .

最佳答案

您应该使用 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 .

关于javascript - 如何使用 Highcharts 显示小值的烛台？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14436013/

文章推荐： php - 如何创建连接到外部数据库的 Drupal 表单模块

文章推荐： ios - 带有 Sprite Kit 的硬件特定图集在 iPad 上被炸毁

ios - 烛台 + 柱形图的组合图
在我看来，这似乎是一件非常微不足道的事情，我让它在 Android 上运行，但在 iOS 上不起作用，即使在彻底阅读了之前的问题之后也是如此...... 无论如何，我只是想创建一个历史价格数据的组合图
python - 几分钟内的 Matplotlib 烛台
下午好我想看看你们中是否有人可以帮助我在几分钟内制作出蜡烛图。我设法在几天内将它们绘制成图表，但我不知道如何在几分钟内完成。附加代码。 import numpy as np import matp
javascript - Highcharts (柱形图、烛台)在图表上的任意位置显示鼠标悬停工具提示，类似于折线图或面积图
我目前正在制作类似于 this 的图表使用 Highcharts 根据我的观察，柱形和烛台图表仅当我将鼠标悬停在框本身上时才会触发mouseover，而折线或面积图表将在图表上的任何位置显示它们，
javascript - Charts.js 烛台(金融图表)在开始和结束时显示一半的柱
看了他们的documentation关于这方面的信息很少。我基本上想在图表的开头和结尾显示一个完整的蜡烛图，而不是现有的半条柱(水平显示蜡烛条的一半)。我可以选择调整我的 JSON 数据并添加一个假
javascript - 带线的 Google Chart ComboChart 烛台
我看过 docs for combo charts并且能够将带有一条线的条形图重现为不同的系列。但是，我如何获得带有不同系列线条的烛台图表？当我尝试时，出现错误 Last domain does n
python - Matplotlib 烛台(盘中)图表是一个大 Blob
我正在尝试使用 Matplotlib 绘制烛台图表，其中包含我为 REST API 调用获取的数据。但是，由于调用使用了唯一的访问 token ，我已经下载了示例数据并将其加载到 csv 中以解决此问
python - 如何在 matplotlib 中用日期时间绘制 ohlc 烛台？
我需要每 5 分钟绘制一次交易数据(一根蜡烛) 这是我目前所拥有的: from matplotlib.finance import candlestick2_ohlc fig, ax = plt.su

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何使用 Highcharts 显示小值的烛台？