Question

嗨我离开了导航菜单，右侧的内容是高清图。以下是我的Highchart配置，

this.InputData = {

            chart: { type: 'column' },
            title : { text : 'Overview' },  

            xAxis: {
                categories: this._weekValues
            },
            yAxis: {
                allowDecimals: false,
                title: { text: 'some title'},
                min: 0,
                max: 100,
                labels: {
                    formatter:function() {
                        var pcnt = (this.value / 100) * 100;
                        return Highcharts.numberFormat(pcnt, 0) + '%';
                    }
                }
            }
        }

我有一个功能，可以在改变左侧菜单的大小时触发，

this.menuEvent.onChangeLeftMenu().subscribe(()=>{
            Observable.timer().subscribe(()=>{
                console.log('highchart redraw?');
            });
        });

如何在更改左侧菜单时redraw或调整图表大小？目前图表溢出我的div包装器。先谢谢你们。

Answer 1

reflow ()

将图表重新流回其容器。默认情况下，根据chart.reflow选项，图表会根据window.resize事件自动回流到其容器。但是，div resize没有可靠的事件，因此如果在没有窗口大小调整事件的情况下调整容器大小，则必须显式调用它。

$('#reflow-chart').click(function () {
    chart.reflow();
});

Fiddle

排序问题会有所帮助，如果你提供的实际演示可能是一些plunker链接

Answer 2

JS Fiddle

 $('#add').click(function () {
chart.addAxis({ // Secondary yAxis
    id: 'rainfall-axis',
    title: {
        text: 'Rainfall'
    },
    lineWidth: 2,
    lineColor: '#08F',
    opposite: true
});
chart.addSeries({
    name: 'Rainfall',
    type: 'column',
    color: '#08F',
    yAxis: 'rainfall-axis',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  $(this).attr('disabled', true);
  $('#remove').attr('disabled', false);
});
 $('#remove').click(function () {
  chart.get('temperature-axis').remove();

  $(this).attr('disabled', true);
$('#add').attr('disabled', false);
 });

根据窗口大小调整Highchart的大小

2 个答案: