个人中心
gpt4 book ai didi

jquery - 如何使用highchart整合市场深度图？

转载 作者：行者123 更新时间：2023-12-01 01:40:28 26 4
gpt4 key购买 nike

如何使用面积图实现市场深度图 Example image click here

谁能帮我，我需要下面的图表

我已经尝试使用 Highcharts 、X、Y 点在合法网站中启动的以下代码如何设置图表中心的点。

  <html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Depth Chart</title>
    <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">//<![CDATA[
    $(function () {
    $.getJSON('http://localhost/bitcocyrus/market_depth/1', function (data) {
    console.log(data);
    $('#container').highcharts({
    chart: {
    type: 'area'
    },
    title: {
    text: 'Market depth'
    },
    subtitle: {
    text: ''
    },
    xAxis: {
    allowDecimals: true,
    labels: {
    formatter: function () {
    return this.value; // clean, unformatted number for year
    }
    }
    },
    yAxis: {
    title: {
    text: 'Volume'
    },
    labels: {
    formatter: function () {
    return this.value ;
    }
    }
    },
    tooltip: {
    pointFormat: '{point.y} BTC at {point.x} CNY'
    },
    plotOptions: {
    area: {
    marker: {
    enabled: false,
    symbol: 'circle',
    radius: 2,
    states: {
    hover: {
    enabled: true
    }
    }
    }
    }
    },
    series: [{ name: 'ask', data: data.buy_order }, { name: 'bid', data: data.sell_order }]
    });
    });
    });
    //]]>
    </script>
  </head>
  <body>
    <script src="//code.highcharts.com/highcharts.js"></script>
    <script src="//code.highcharts.com/modules/exporting.js"></script>
    <div id="container"></div>
  </body>
  </html>

请检查以下 json 格式

{"buy_order":"[1]","sell_order":"[1,10]"}

最佳答案

使用下面的解决方案，它完全有效。

  1. 您需要买单金额或单位的累计总和，按买单价格升序排列。

  2. 您再次需要卖单金额或单位的累计总和，即按卖单价格降序排列。

    将 1 和 2 的结果合并到一个查询中

  3. 使用此代码创建 Highcharts 。

函数 DepthChart(apilink, 基础, 计数器){$.getJSON(apilink + '/Chart/depthchart?Base=' +base + '&Counter=' +counter + '&Depth=100', 函数 (depthChartJSON) {

    $(function () {
        $('#depthgraphContainer').highcharts({
            chart: {
                backgroundColor: "#000d1d",
                marginTop: 75,
                type: 'area',
                animation: true,
                marginBottom: 100,
                marginLeft: 100,
                marginRight: 100,
                marginTop: 100,
                zoomType: 'x',
                // spacingLeft: 100,
                // spacingRight: 100,
                // spacingTop: 100,
                // spacingBottom: 100
            },

            title: {
                text: '',
                //y: 40
            },

            // subtitle: {
            //     text: 'Drag mouse to zoom'
            // },

            navigator: {
                enabled: false
            },

            scrollbar: {
                enabled: false
            },
            exporting: {
                enabled: false
            },

            xAxis: {
                gridLineWidth: 0.1,
                // tickPixelInterval:500,
                // minorTickInterval: 'auto',
                // minorTickColor: '#FEFEFE',
                // title: {
                //     text: 'Price',
                //     style: {
                //         color: '#666',
                //     }
                // },
            },

            yAxis: {
                gridLineWidth: 0.1,
                // tickPixelInterval:500,
                // minorTickInterval: 'auto',
                // minorTickColor: '#FEFEFE',
                title: {
                    text: '',
                    // style: {
                    //     color: '#666',
                    // }
                },
            },

            legend: {
                symbolWidth: 12,
                symbolRadius: 60,
                align: 'center',
                verticalAlign: 'bottom',
                //y: 500,
                floating: true,
                backgroundColor: '#262c38',
                itemStyle: {
                    color: '#666'
                },
                itemHoverStyle: {
                    color: '#999'
                }
            },
            plotOptions: {
                series: {
                    lineWidth: 1,
                    animation: true,
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            tooltip: {
                crosshairs: [true, true],
                formatter: function () {
                    return 'Price <b>' + this.x + '</b> <br/>' + this.series.name + '<b>' + this.y + '</b>';
                }
            },
            series: [
                {
                    name: 'Buy orders',
                    data: depthChartJSON.bids,
                    color: 'rgba(1,170,120,1.0)',
                    fillColor: 'rgba(1,170,120,0.2)'
                },
                {
                    name: 'Sell orders',
                    data: depthChartJSON.asks,
                    color: 'rgba(255,95,115,1.0)',
                    fillColor: 'rgba(255,95,115,0.2)'
                }
            ]
        });
    });
});

}

关于jquery - 如何使用highchart整合市场深度图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48621277/

26 4 0
文章推荐： javascript - 创建 Bookmarklet 以打开页面并向其中添加一些脚本
文章推荐： javascript - 如何区分 DOM 函数中使用的相同 div？
文章推荐： jquery - 使用 AJAX 的 Django CreateView
文章推荐： python - 在自定义用户的配置文件中发现不需要的随机值
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com