Question

我使用lazy loading方法加载OHLC数据。在服务器端，我使用Python + MySQL，有4个表，OHLC数据，时间间隔为5分钟，1小时，1天，1个月。实际上它运作良好，但不幸的是，Highcharts以一种奇怪的方式显示烛台。特别是在初始加载和我在变焦之间切换时。以下是一些例子：

1。对图表初始化进行分组

首次加载6h，24h＆amp; 3d被禁用，烛台分开。

仅在点击后第一次1w图表显示如下，这是正确的，还有缩放按钮6h，24h＆amp; 3d现已启用。

2。在rangeSelector按钮之间单击时分组

如果我点击范围选择器中的All，我会得到以下显示（这是错误的）：

只有在点击1m然后再回到All后才会显示正确的内容：

有人知道发生了什么事吗？提前谢谢了！这是代码：

<script>
$(function () {

    function afterSetExtremes(e) {

        var chart = Highcharts.charts[0];    

        $.getJSON('http://ipaddress/data3?start=' + Math.round(e.min / 1000) +
                '&end=' + Math.round(e.max / 1000), function (data) {

            chart.series[0].setData(data);
            chart.hideLoading();
        });
    }

    //Initially load the biggest data range
    $.getJSON('http://ipaddress/data3?start=1481897400&end=1486910100', function (data) {

        // Add a null value for the end date
        //data = [].concat(data, [[Date.UTC(2011, 9, 14, 19, 59), null, null, null, null]]);

        // create the chart
        Highcharts.stockChart('container', {
            chart: {
                type: 'candlestick',
                zoomType: 'x'
            },

            navigator: {
                adaptToUpdatedData: false,
                series: {
                    data: data
                }
            },

            scrollbar: {
                liveRedraw: false
            },

            rangeSelector: {
                buttons: [{
                    type: 'hour', 
                    count: 6,
                    text: '6h',
                    dataGrouping: {
                        forced: false,
                        units: [['minute', [15]]]
                    }
                }, {
                    type: 'hour', 
                    count: 24,
                    text: '24h',
                    dataGrouping: {
                        forced: false,
                        units: [['minute', [30]]]
                    }
                }, {
                    type: 'day',
                    count: 3,
                    text: '3d',
                    dataGrouping: {
                        forced: false,
                        units: [['hour', [2]]]
                    }
                }, {
                    type: 'day',
                    count: 7,
                    text: '1w',
                    dataGrouping: {
                        forced: false,
                        units: [['hour', [4]]]
                    }
                }, {
                    type: 'day',
                    count: 30,
                    text: '1m',
                    dataGrouping: {
                        forced: false,
                        units: [['day', [1]]]
                    }
                }, {
                    type: 'all',
                    text: 'All'
                }],
                inputEnabled: false,
                selected: 3    // Init loading button
            },

            xAxis: {
                events: {
                    afterSetExtremes: afterSetExtremes
                },
                //minRange: 3600 * 1000 // one hour
            },

            yAxis: {
                floor: 0
            },

            series: [{
                data: data,
                dataGrouping: {
                    enabled: true
                }
            }]
        });
    });
});

Answer 1

以下是解决方案：

<强> 1。图表初始化没有分组

要在初始化阶段解决分组问题，请使用以下行：

Highcharts.stockChart('container', {
    //.... your code ...
}, function(chart){
    chart.rangeSelector.clickButton(1);
    });

这里的问题是图表选项中的所选按钮没有触发xAxis的afterExtremes事件。

<强> 1。单击rangeSelector

时无分组

要避免Highcharts在rangeSelector按钮之间点击时对数据进行分组，请按以下方式设置图表：

rangeSelector: {
    buttons: [{
        dataGrouping: {
            forced: false }
             }] }

Highcharts奇怪的分组行为

1 个答案: