Question

我有一个图表，默认显示年度数据。我还有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（）函数设置的确切范围？

Answer 1

您可以在HighCharts中使用RANGESELECTOR选项

allocate

然后使用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

<强> JSFIDDLE DEMO

Answer 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
    );
});

Highcharts setExtremes（）不会显示一天的正确间隔

2 个答案: