Question

我有一个高清柱形图，标签旋转到-45度。我想将标签旋转到-90度，但这样做会让我的酒吧消失！小提琴：http://jsfiddle.net/Snowbell92/LMEve/（这个标签旋转到-90度）。和代码：

$(function () {
    $('#closingvolumechart').highcharts({
        chart: {
            type: 'column',

        },
        title: {
            text: 'Fuel & Power Industry'
        },
        xAxis: {
            categories: ["EXIM BANK 1ST MUTUAL FUND","NLI FIRST MUTUAL FUND","AIBL 1ST ISLAMIC MUTUAL FUND","6TH ICB M.F.","GRAMEEN MUTUAL FUND ONE","AB BANK 1ST MUTUAL FUND","NCCBL MUTUAL FUND-1","ICB AMCL SECOND MUTUAL FUND","5TH ICB M.F.","TRUST BANK 1ST MUTUAL FUND","FIRST BANGLADESH FIXED INCOME FUND","IFIC BANK 1ST MUTUAL FUND","4TH ICB M.F.","7TH ICB M.F.","POPULAR LIFE FIRST MUTUAL FUND","LR GLOBAL BANGLADESH MUTUAL FUND ONE","ICB AMCL THIRD NRB MUTUAL FUND","FIRST JANATA BANK MUTUAL FUND","AIMS 1ST M.F.","DBH FIRST MUTUAL FUND","GRAMEEN ONE : SCHEME TWO","RELIANCE ONE THE 1ST SCHEME OF RELIANCE INSURANCE MUTUAL FUN","IFIL ISLAMIC MUTUAL FUND-1","ICB AMCL 1ST NRB MUTUAL FUND","PHP FIRST MUTUAL FUND","PRIME BANK 1ST ICB AMCL MUTUAL FUND","2ND ICB M.F.","ICB AMCL ISLAMIC MUTUAL FUND","8TH ICB M.F.","1ST ICB M.F.","ICB AMCL SONALI BANK LIMITED 1ST MUTUAL FUND","SOUTHEAST BANK 1ST MUTUAL FUND","PRIME FINANCE FIRST MUTUAL FUND","EBL FIRST MUTUAL FUND","EBL NRB MUTUAL FUND","3RD ICB M.F.","ICB EMPLOYEES PROVIDENT MF 1: SCHEME 1","MBL 1ST MUTUAL FUND","GREEN DELTA MUTUAL FUND","PHOENIX FINANCE 1ST MUTUAL FUND","ICB AMCL 2ND NRB MUTUAL FUND"],
            labels: {
                rotation: -90,
                align: 'right',
                style: {
                    fontSize: '10px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        plotOptions: {
        series: {
                    minPointLength: 8,
            borderColor: '#f2f2f2',
            borderWidth: 2,
            shadow: true,
        }
    },
    credits: {
            enabled: false
},
        yAxis: {
            min: 0,
            title: {
                text: 'Volume'
            }
        },
        legend: {
            enabled: false
        },
        column: { dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    verticalAlign: 'top'

                }

            },
        series: [{
            name: 'Volume',
            data: [530,536,539,573,574,591,597,614,614,631,633,681,706,708,719,751,752,755,758,771,782,838,857,870,876,877,897,905,929,934,941,957,990,996,999,1005,1023,1023,1029,1052,1059],
            color: '#008000',
        }]
    });
});

另外，我不知道这是否是一个单独的问题，但在选项卡中实现图表（我使用的是Twitter引导选项卡）并不能使图表100％宽。只有当我激活firebug时，图表才会展开。网址：http://goo.gl/X3sNVq，请参阅标签“在图表中显示股票价格”，然后选择“收盘价”（活动标签）。图表与上面的图表相同。我非常感谢任何帮助。提前谢谢。

Answer 1

你只需要增加图表的高度。由于x轴标签很长，因此图表无法绘制条形图。我把高度增加到600px。

<div id="closingvolumechart" style="height: 600px"></div>

请参阅演示here

高清标签旋转使我的列消失

1 个答案: