如何在highchart.js图表​​上增加x轴标签区域的高度？ [英] How do you increase the height of the x-axis labels area on a highchart.js chart?

问题描述

我有一个简单的线图由highcharts.js创建。我在x轴（30）有很多刻度线，所以我设置交错2处理水平重叠的标记。但是，x轴刻度标签的下一行正被图表的末尾截断。

I have a simple line graph created by highcharts.js. I have a lot of tick marks in the x-axis (30), so I set stagger to 2 deal with the marks overlapping each other horizontally. However, the lower row of x-axis tick labels is being cut off by the end of the chart.

无论我制作图表多高，x轴刻度线标签的下一行被切断。如何增加这个区域的高度来解决这个问题？还是有其他方法？

No matter how tall I make the chart the lower row of x-axis tick mark labels is cut off. How can I increase the height of this area to fix this? Or is there some other method?

month_chart = new Highcharts.Chart({
chart: {
    borderRadius: 0,
    height: chart_height,
    marginRight: 30,
    marginBottom: 25,
    renderTo: 'leads-by-month',
    type: 'line',
},
title: {
    text: 'Past 30 Days',
},
xAxis: {
    categories: [<?php print $bymonth_categories; ?>],
    labels: {
        staggerLines: 2,
    },
},
yAxis: {
    title: {
        text: 'Leads',
        style: {color: '#3d3e41', }
    },
    plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
    }],
    min: 0,
},
plotOptions: {
    line: {
        color: '#578df1',
        dataLabels: {
            enabled: true,
            color: '#3d3e41',
        },
        enableMouseTracking: false
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'top',
    x: -100,
    y: 74,
    floating: true,
    borderWidth: 1,
    backgroundColor: '#FFFFFF',
    shadow: true
},
series: [{
    name: '<?php print $organization['name']; ?>',
    data: [<?php print $bymonth_data; ?>]
}]
        });

推荐答案

//api.highcharts.com/highcharts#chart.marginBottomrel =nofollow> marginBottom 选项。默认值为70，这​​对于2行记号标签应该是足够的，你已经将它设置为25不是。

Just bump up the marginBottom option. The default is 70 which should be plenty for 2 rows of tick labels, you've set it to 25 which is not.

这篇关于如何在highchart.js图表​​上增加x轴标签区域的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！