Question

在Highcharts中，您可以向图表添加responsive规则。可以与中介查询类似的方式使用该媒体查询，在媒体查询中您可以针对不同的屏幕尺寸调整选项。

我的问题是，高度的响应式图表选项未在图表的初始加载中应用。我提供了此jsfiddle来演示此问题。有趣的是，正在应用其他响应规则。您可以在jsfiddle中看到xAxis上的标签已按预期缩短为单个字符。如果使用按钮对图表进行重排（或调整视图大小），则图表将获得高度规则。此外，当高度设置为像素时，规则完全适用。但是，以像素为单位设置高度并不是我需要的响应行为。

下面是jsfiddle中的相同代码，因为链接到jsfiddles时必须放置一些内容。我在这里缺少什么吗？还是需要提交给Highcharts的错误？每次都调用reflow（）时，它会重新绘制图表额外的时间，我不确定这不会导致动态布局出现问题。

var chart = Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: 'Highcharts responsive chart'
},

subtitle: {
    text: 'Resize the frame to see the axes change'
},

xAxis: {
    categories: ['January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December']
},

yAxis: {
    labels: {
        x: -15
    },
    title: {
        text: 'Items'
    }
},

series: [{
    name: 'Sales',
    data: [434, 523, 345, 785, 565, 843, 726, 590, 665, 434, 312, 432]
}],

responsive: {
    rules: [{
        condition: {
            maxWidth: 500
        },
        // Make the labels less space demanding on mobile
        chartOptions: {
            chart: {
                    height: "1000%"
            },
            xAxis: {
                labels: {
                    formatter: function () {
                        return this.value.charAt(0);
                    }
                }
            },
            yAxis: {
                labels: {
                    align: 'left',
                    x: 0,
                    y: -2
                },
                title: {
                    text: ''
                }
            }
        }
    }]
}
});

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

百分比高度响应高图表选项不适用于图表负载

0 个答案: