Question

我遇到了highstock的tickPixelInterval问题。当我们单击“缩放”按钮时，应显示相应的数据。如果我们点击Day（1d）按钮，它应该准确显示x-Axis上的一天数据和日期格式应该从00:00开始，结束日期应该是23:59，时间间隔必须是1小时。如果我们点击1M，3M，6M按钮，它应该相应地显示数据，并且X轴间隔的日期格式/间隔必须是一天。 Highstock可能吗？在JSFiddle中我们怎样才能增加x轴的长度？

    $(function() {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {

        // Create the chart
        $('#container').highcharts('StockChart', {


            rangeSelector : {

            inputEnabled: $('#container').width() > 280,
            buttons: [{
                type: 'day',
                count: 5,
                text: '1d'
            }, {
                type: 'month',
                count: 1,
                text: '1m'
            }, 
            {
                type: 'month',
                count: 3,
                text: '3m'
            },
            {
                type: 'month',
                count: 6,
                text: '6m'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }],
            selected: 0//default show the last 5day's graph

            },

            title : {
                text : 'AAPL Stock Price'
            },
            xAxis: {
         type: 'datetime',
         ordinal: false,
         tickInterval: 24*60 * 60 * 1000,//For One Day
         minTickInterval: 60 * 60 * 1000,//For One Hour
         tickPixelInterval: 300,
         startOnTick:true,

    },
              scrollbar: {
            //height: 10,
            enable: true
        },
            series : [{
                name : 'AAPL Stock Price',
                data : data,
                marker : {
                    enabled : true,
                    radius : 3
                },
                shadow : true,
                tooltip : {
                    valueDecimals : 2
                },
               pointInterval: 24*60*60*1000 
            }]
        });
    });
});

Answer 1

我完全更新了我的答案。我使用 tickPositioner 来确保我的xAxis就像我想要的那样。在我的示例中（最后的jsfiddle），当您单击按钮或在底部移动导航器时，xAxis将重新定位，具有以下行为：

如果范围是1天max =＆gt;每小时1滴
如果范围介于1天和1个月之间=＆gt;每天1滴答
如果范围介于1个月至1年之间=＆gt;每月1滴
如果显示超过1年，每年1个刻度

您可以完全自定义这些值。

为避免重叠，我还在xAxis上添加了标签属性

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {
        $('#container').highcharts('StockChart', {
            rangeSelector : {
                inputEnabled: $('#container').width() > 280,
                buttons: [{
                    type: 'day',
                    count: 1,
                    text: '1d'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, 
                {
                    type: 'month',
                    count: 3,
                    text: '3m'
                },
                {
                    type: 'month',
                    count: 6,
                    text: '6m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1y'
                }, {
                    type: 'all',
                    text: 'All'
                }],
                selected: 0//default show the last day's graph
            },
            title: {
                text: 'AAPL Stock Price'
            },
            xAxis: {
                type: 'datetime',
                ordinal: false,
                startOnTick: false,
                minRange: 24 * 60 * 60 * 1000, // One day max zoom
                labels : { y : 20, rotation: -45, align: 'right' },

                tickPositioner: function (min, max) {
                    var xDataRange = max - min,
                        positions = [],
                        tick = min;

                    positions.info = {higherRanks: {}};

                    if (xDataRange <= 86400000) {
                        // If range is 1 day max => 1 tick every hour
                        increment = 3600000;
                        positions.info.unitName = "hour";
                    } else if (xDataRange > 86400000 && xDataRange <= 2592000000) {
                        // If range is between 1 day and 1 month => 1 tick every day
                        increment = 86400000;
                        positions.info.unitName = "day";
                    } else if (xDataRange > 2592000000 && xDataRange <= 31536000000) {
                        // If range is between 1 month and 1 year => 1 tick every month
                        increment = 2592000000;
                        positions.info.unitName = "month";
                    } else {
                        // If more than 1 year displayed, 1 tick every year
                        increment = 365 * 24 * 60 * 60 * 1000;
                        positions.info.unitName = "year";
                    }

                    // Create ticks
                    for(tick = min; tick - increment < max; tick += increment) {
                        positions.push(tick);
                    }
                    positions.info.totalRange = positions[positions.length - 1] - positions[0];
                    return positions;
                }
            },
            scrollbar: {
                enable: true
            },
            series : [{
                name : 'AAPL Stock Price',
                data : data,
                marker : {
                    enabled : true,
                    radius : 3
                },
                shadow : true,
                tooltip : {
                    valueDecimals : 2
                },
                pointInterval: 24 * 60 * 60 * 1000 // Serie point interval set to 1 day
            }]
        });
    });
});

请参阅更新的小提琴：http://jsfiddle.net/fe83S/9/

Answer 2

您可以使用或tickInterval或tickPixelInterval，而不是两者。

现在，一般来说，Highstock不支持此类功能，但您可以使用tickPositioner管理刻度线位置。只需返回正确的刻度（时间戳），然后在xAxis.labels.formatter格式标签中以呈现正确的日期格式。

Highstock tickPixelInterval不起作用

2 个答案: