Highcharts setExtremes() 一天不显示正确的时间间隔答案

【问题标题】：Highcharts setExtremes() does not display the correct interval for one dayHighcharts setExtremes() 一天不显示正确的时间间隔
【发布时间】：2015-09-16 22:04:46
【问题描述】：

我有一个默认显示年度数据的图表。我还有 3 个按钮，可让我按特定时间间隔（每年/每周/每天）放大/缩小。我通过在 setExtremes() 函数上设置特定的时间间隔来做到这一点。例如：每周：

$('#weeklyView').click(function () {
   var chart = $('.chart-stor').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2015, 0, 5),
            Date.UTC(2015, 0, 12)
        );
    });

每周间隔选择非常有效。但是，当我对每日视图执行相同操作时，它会显示大约 5 天的数据，而不仅仅是所选日期：

$('#dailyView').click(function () {
        var chart = $('.chart-stor').highcharts();
        chart.xAxis[0].setExtremes(
            Date.UTC(2015, 6, 1),
            Date.UTC(2015, 6, 1)
        );
   });

我应该如何确保图表在每日视图中显示我使用 setExtremes() 函数设置的确切范围？

【问题讨论】：

直接设置minRange。见API。
@PawełFus：谢谢！它适用于 minRange 集。

标签： jquery charts highcharts

【解决方案1】：

您可以在 HighCharts 中使用 RANGESELECTOR 选项

rangeSelector: {
                        buttons: [{
                            type: '',
                            count: 2,
                            text: 'My dates'
                        },{
                            type: 'hour',
                            count: 1,
                            text: '1h'
                        }, {
                            type: 'day',
                            count: 1,
                            text: '1d'
                        }, {
                            type: 'month',
                            count: 1,
                            text: '1m'
                        }, {
                            type: 'year',
                            count: 1,
                            text: '1y'
                        }, {
                            type: 'all',
                            text: 'All'
                        }],
            },

然后使用afterSetextremes选项

    afterSetExtremes: function(e) {
                            if (e.trigger == "rangeSelectorButton" && 
                                e.rangeSelectorButton.text == "My dates"){
                                // it is your button that caused this,
                                // so setExtrememes to your custom
                                // have to do in timeout to let
                                // highcharts finish processing events...
                                setTimeout(function()

{Highcharts.charts[0].xAxis[0].setExtremes
    (custom dates from,custom date to)  }, 1);
             }

JSFIDDLE DEMO

【讨论】：

【解决方案2】：

1) 您可以使用更具体的日期构造函数。

2) 您必须添加时区偏移量才能正确显示范围。

$('#dailyView').click(function () {
    var chart = $('.chart-stor').highcharts();
    var timezoneOffset = Highcharts.getOptions().global.timezoneOffset * 60 * 1000;

    chart.xAxis[0].setExtremes(
        Date.UTC(2015, 6, 1, 0, 0, 0) + timezoneOffset,
        Date.UTC(2015, 6, 1, 23, 59, 59) + timezoneOffset
    );
});

【讨论】：