自动图表高度

默认的高图表高度= 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

自动图表高度

回答

相关问题