2014-11-08 4 views
0

Хотелось бы добавить внутридневный (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 
       } 
      }] 
     }); 
    }); 
}); 

ответ

0

Вы должны определить свои собственные buttons массивы:

  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 дней. См. Подробности here.

Обновлено fiddle.

+0

Диаграмма объема снизу кажется отсутствующей в опции «5 дней». –

+0

@JamieWhite, он там, значение объема для этих 5 дней настолько низкое, высота бара не рендерится. Вот скрипка, где я искусственно повысил ценность: http://jsfiddle.net/cvezpup7/3/ – Mark

Смежные вопросы