Высота автоматической диаграммы

Question

Высота по умолчанию: высота = 400 пикселей.

Как установить таблицу высоты для автоматического размера на основе оси диаграммы и ее размеров?

См. Пример ниже, панель навигации находится над панелью громкости.

http://jsfiddle.net/BYNsJ/

Я знаю, что я могу установить высоту для DIV, но у меня есть решение, которое вставить/удалить ось/серии динамически в графике и будет приятно авто высота диаграммы.

Примером является та же самая демонстрация Подсвечника/Объема с сайта Highchart, но без свойства height в контейнере div.

// split the data set into ohlc and volume 
    var ohlc = [], 
     volume = [], 
     dataLength = data.length; 

    for (i = 0; i < dataLength; i++) { 
     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 
     ]) 
    } 

    // set the allowed units for data grouping 
    var groupingUnits = [[ 
     'week',       // unit name 
     [1]        // allowed multiples 
    ], [ 
     'month', 
     [1, 2, 3, 4, 6] 
    ]]; 

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

     rangeSelector: { 
      selected: 1 
     }, 

     title: { 
      text: 'AAPL Historical' 
     }, 

     yAxis: [{ 
      title: { 
       text: 'OHLC' 
      }, 
      height: 200, 
      lineWidth: 2 
     }, { 
      title: { 
       text: 'Volume' 
      }, 
      top: 300, 
      height: 100, 
      offset: 0, 
      lineWidth: 2 
     }], 

     series: [{ 
      type: 'candlestick', 
      name: 'AAPL', 
      data: ohlc, 
      dataGrouping: { 
       units: groupingUnits 
      } 
     }, { 
      type: 'column', 
      name: 'Volume', 
      data: volume, 
      yAxis: 1, 
      dataGrouping: { 
       units: groupingUnits 
      } 
     }] 
    }); 
    }); 
}); 

С уважением.

Answer 1

Highcharts не поддерживает динамическую высоту, вы можете достичь его $(window).resize события:

$(window).resize(function() 
{  
    chart.setSize(
     $(document).width(), 
     $(document).height()/2, 
     false 
    ); 
}); 

Смотрите демо скрипку here.

Answer 2

вот один пример, который изменяет размер в соответствии с экраном. http://jsfiddle.net/davide_vallicella/LuxFd/2/

Просто не устанавливайте свойство height в HighCharts, и оно будет обрабатывать его динамически для вас, пока вы задаете высоту элемента, содержащего диаграмму. Это может быть фиксированное число или даже процент, если позиция является абсолютной.

http://api.highcharts.com/highcharts/chart.height

По умолчанию высота вычисляется по высоте смещения вмещающего элемента

найти пример здесь: - http://jsfiddle.net/wkkAd/149/

#container { 
    width:100%; 
    height:100%; 
    position:absolute; 
} 

Answer 3

Вы можете установить chart.height динамически с диаграммой. метод обновления.

http://api.highcharts.com/highcharts/Chart.update

function resizeChartFromValues (chart) { 
    const pixelsForValue = 10 
    const axis = chart.yAxis[0] 
    chart.update({ chart: { height: (axis.max - axis.min) * pixelsForValue } }) 
} 

const options = { 
    chart: { 
    events: { 
     load() {resizeChartFromValues(this)} 
    } 
    }, 
    series: [{ 
    data: [30, 70, 100], 
    }] 
} 

const chart = Highcharts.chart('container', options) 

setTimeout(() => { 
    chart.series[0].setData([10, 20, 30]) 
    resizeChartFromValues(chart) 
}, 1000) 

Живой пример: https://jsfiddle.net/a97fgsmc/

Answer 4

эй я использовал угловую 2+ и highchart/highstock V.5, я думаю, что это будет работать в JS или JQuery также, здесь легко решение

HTML

<div id="container"> 
    <chart type="StockChart" [options]="stockValueOptions"></chart> 
</div> 

CSS

#container{ 
    height: 90%; 
} 

TS

this.stockValueOptions = { 
    chart: { 
     renderTo: 'container'      
    }, 
    yAxis: [{ 
     height: '60%' 
    },{ 
     top: '65%', 
     height: '35%' 
    }] 
} 

Его работы, и легкий. Удалите высоту диаграммы, добавьте высоту в '%' для yAxis.