自動圖表高度

默認的高圖表高度= 400px。自動圖表高度

如何根據圖表軸及其尺寸設置自動尺寸的高度圖？

請參閱下面的示例，導航欄位於卷面板上方。

我知道我可以設置高度的股利，但我有一個插入/刪除動態軸/系列在圖表中和將是很好的自動高度圖表的解決方案。

該示例與Highchart站點的燭臺/音量演示相同，但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 
      } 
     }] 
    }); 
    }); 
});

問候。

來源

2013-04-04 Kleyson Rios

您應該能夠使用您的yAxes中的百分比而不是固定值：http：// jsfiddle。net/BYNsJ/13 /如果它不能幫助你解決這個問題，你可以使用chart.setSize（）來設置圖表的正確高度; – 2016-07-25 05:57:52

[Highcharts可能重複 - 如何使用動態高度的圖表]（https://stackoverflow.com/questions/8809852/highcharts-how-to-have-a-chart-with-dynamic-height） – trushkevich 2017-12-07 06:40:29

Highcharts不支持動態的高度，您可以通過$(window).resize事件實現它：

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

觀看演示小提琴here。

來源

2013-04-04 17:54:55

I認爲您需要在您的示例中包含http://code.highcharts.com/highcharts.js以使其正常工作。 – 2016-07-25 05:55:36

這裏是一個例子，它是根據屏幕調整圖表的大小。 http://jsfiddle.net/davide_vallicella/LuxFd/2/

只要不在HighCharts中設置height屬性，只要您在圖表的包含元素上設置高度，它就會動態地爲您處理它。如果位置是絕對的，它可以是固定數量或者甚至百分之一。

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

默認情況下，高度是從含元素

在這裏找到例子的偏移高度計算： - http://jsfiddle.net/wkkAd/149/

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

來源

2017-01-26 05:35:16 Darshak

您可以設置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/

來源

2017-03-29 13:30:31 stpoa

哎，我採用了棱角分明2+和highchart/highstock第5節，我認爲它會在JS或jQuery的工作，同時，這裏是一個簡單的解決方案

HTML

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

CSS

個

#container{ 
    height: 90%; 
}

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

它的工作，和容易。在yAxis的'％'中刪除圖表高度添加高度。

來源

2017-08-31 10:49:18

自動圖表高度

回答

相關問題