如何更改 Highcharts (Highstock) 中蜡烛图的时间范围？答案

【问题标题】：How to change time frame of the candle stick chart in Highcharts (Highstock)?如何更改 Highcharts (Highstock) 中蜡烛图的时间范围？
【发布时间】：2018-06-23 04:17:44
【问题描述】：

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

在下面的主题中，作者使用图表上的按钮：1m、5m、30m 等。Highcharts: Ugly Candlesticks 我想在同一个地方使用相同的按钮，但要更改图表的时间范围。所需时间范围为 1m、5m、15m、30m、1h、1d。

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

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

【问题讨论】：

标签： charts highcharts highstock

【解决方案1】：

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

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

$.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]
                    ]
                ]
            }
            */
        }]
    });
});

<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>

【讨论】：