Question

我使用从bitfinex.com收到的一些json数据绘制烛台图表。我的json数据如下所示：https://api.bitfinex.com/v2/candles/trade:1m:tBTCUSD/hist?start=1515866400000&end=1515883264000 此json数据存储在我的localhost上的DB中。

在下面的主题中，作者使用图表上的按钮：1米，5米，30米等Highcharts: Ugly Candlesticks 我想在同一个地方使用相同的按钮，但是要更改图表的时间范围。期望的时间范围是1米，5米，15米，30米，1小时，1天。

此功能在https://www.tradingview.com/chart/Gxv53gcp/得到了很好的发展，您可以从左上角的下拉菜单轻松更改图表的时间范围。

我很乐意根据服务器请求的不同时间范围构建图表。有没有办法只从服务器请求1米时间帧蜡烛，将其存储在数据库中然后以某种方式强制Highstock渲染更大的时间帧？我在C＃中使用默认的图表库时使用了这种方法，并且效果很好。也许Highstock有相同的功能？

Answer 1

我找到了答案。此功能称为数据摸索。 https://www.highcharts.com/docs/advanced-chart-features/data-grouping

JSfiddle示例： http://jsfiddle.net/sqkhp67f/

＆＃13;

$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=new-intraday.json&callback=?', function (data) {

    // create the chart
    Highcharts.stockChart('container', {


        rangeSelector: {
            selected: 1
        },

        title: {
            text: 'AAPL Stock Price'
        },

        series: [{
            type: 'candlestick',
            name: 'AAPL Stock Price',
            //approximation : 'OHLC',
            data: data,
            
            dataGrouping: {
            groupPixelWidth: 20 // Quantity of points to group
            },
					

          
            /*
            dataGrouping: {
                units: [
                    [
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]
                ]
            }
            */
        }]
    });
});

＆＃13;

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

＆＃13;

如何改变Highcharts（Highstock）中蜡烛图表的时间范围？

1 个答案: