将盘中选项添加到高点

Adding intraday option to highcharts

本文关键字:高点 添加 选项      更新时间:2023-09-26

希望在下图中添加日内(1天)缩放选项。我想看看如何结合现有的缩放选项来实现这一点的示例-http://jsfiddle.net/cvezpup7/1/

$(function () {
    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function (data) {
        // split the data set into ohlc and volume
        var ohlc = [],
            volume = [],
            dataLength = data.length,
            // set the allowed units for data grouping
            groupingUnits = [[
                'week',                         // unit name
                [1]                             // allowed multiples
            ], [
                'month',
                [1, 2, 3, 4, 6]
            ]],
            i = 0;
        for (i; i < dataLength; i += 1) {
            ohlc.push([
                data[i][0], // the date
                data[i][1], // open
                data[i][2], // high
                data[i][3], // low
                data[i][4] // close
            ]);
            volume.push([
                data[i][0], // the date
                data[i][5] // the volume
            ]);
        }
        var minOHLC = Math.min.apply(Math, ohlc.map(function(v) { return v[3] > 0 ? v[3] : 99999999 }))
        var maxOHLC = Math.max.apply(Math, ohlc.map(function(v) { return v[2]}))
        var maxVolume = Math.max.apply(Math, volume.map(function(v) { return v[1]}))
        var maxVolumeHeight = maxVolume / (minOHLC / maxOHLC)
        // create the chart
        $('#container').highcharts('StockChart', {
            navigator: {
                enabled: false
            },
            rangeSelector: {
                selected: 1,
                inputEnabled: false
            },
            credits: {
                enabled: false
            },           
            yAxis: [{
                lineWidth: 0
            }, {
                max: maxVolumeHeight,
                offset: 0,
                lineWidth: 0,
               // gridLineWidth: 0,
                labels:
                {
                  enabled: false
                }
            }],
           series: [{
                type: 'candlestick',
                name: 'AAPL',
                data: ohlc,
                dataGrouping: {
                    units: groupingUnits
                }
            }, {
                type: 'column',
                name: 'Volume',
                data: volume,
                yAxis: 1,
                dataGrouping: {
                    units: groupingUnits
                }
            }]
        });
    });
});

您需要定义自己的按钮数组:

            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: 'ytd',
                text: 'YTD'
            }, {
                type: 'year',
                count: 1,
                text: '1y'
            }, {
                type: 'all',
                text: 'All'
            }]

注意,有了这个数据集,Highstock让你走的最精细的时间是5天。请在此处查看详细信息。

更新的小提琴。