高亮条形图：即使图表和标签之间有空格，X轴标签也会被切断

Question

Highchart的条形图xaxis标签被缩减并在图表宽度减小时添加..即使图表和最左边的标签之间有空格，也会发生这种情况。有没有人知道如何控制空格并使标签的所有字符生成？

JSFiddle示例：http://jsfiddle.net/nbb9us69/1/

                            $(function() {
                              function draw() {
                                if ($('div[data-sectionId="7488"] .chart .highcharts-container').length > 0) return;
                                $('div[data-sectionId="7488"] .chart').highcharts({
                                  chart: {
                                    style: {
                                      fontFamily: 'Arial',
                                      fontSize: '8pt'
                                    },
                                    height: 240,
                                    backgroundColor: 'rgba(255,255,255,0)',
                                    spacing: [0, 5, 5, 0],
                                    type: 'bar',
                                  },
                                  xAxis: [{
                                    categories: ['21.5%', '18.4%', '15.1%', '14.4%', '9.2%', '8.5%', '7.0%', '4.9%', '1.1%'],
                                    labels: {
                                      padding: 50,
                                      style: {
                                        fontFamily: 'Arial',
                                        fontSize: '8pt',
                                        color: '#000000'
                                      }
                                    },
                                    tickLength: 0
                                  }, {
                                    categories: ['Financials', 'Energy', 'Consumer Staples', 'Information Technology', 'Materials', 'Consumer Discretionary', 'Telecommunications', 'Industrials', 'Health Care'],
                                    labels: {
                                      padding: -20,
                                      align: 'left',
                                      x: 0,
                                      step: 1,
                                      style: {
                                        fontFamily: 'Arial',
                                        fontSize: '8pt',
                                        color: '#000000'
                                      }
                                    },
                                    offset: 250,
                                    tickLength: 0
                                  }],
                                  yAxis: {
                                    maxPadding: 0,
                                    gridLineColor: 'null',
                                    title: {
                                      text: ''
                                    },
                                    labels: {
                                      style: {
                                        fontFamily: 'Arial',
                                        fontSize: '8pt',
                                        color: '#7f7f7f'
                                      },
                                      overflow: 'justify',
                                      format: ' ',
                                      y: 8
                                    }
                                  },
                                  plotOptions: {
                                    bar: {
                                      animation: false,
                                      color: '#0088CE',
                                      dataLabels: {
                                        enabled: false,

                                        allowOverlap: true
                                      },
                                      states: {
                                        hover: {
                                          enabled: false
                                        }
                                      }
                                    },
                                    series: {
                                      pointWidth: 20,
                                      stacking: 'normal',
                                      pointPadding: 0.1,
                                      groupPadding: 0
                                    }
                                  },
                                  series: [{
                                    data: [21.5, 18.4, 15.1, 14.4, 9.2, 8.5, 7.0, 4.9, 1.1]
                                  }, {
                                    xAxis: 1,
                                    data: [0, 0, 0, 0, 0, 0, 0, 0, 0]
                                  }],
                                  title: {
                                    text: ''
                                  },
                                  credits: {
                                    enabled: false
                                  },
                                  legend: {
                                    enabled: false
                                  },
                                  tooltip: {
                                    enabled: false
                                  }
                                });
                              };
                              if ($('div[data-sectionId="7488"]').closest('.tab').length == 0) {
                                draw();
                                return;
                              }
                              var containingTab = $('div[data-sectionId="7488"]').closest('.tab');
                              var containingTabs = $(containingTab).closest('.tabs');
                              containingTabs.tabs('onChange', containingTab.index(), function() {
                                draw();
                              });
                            });

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="section contentSection breakdown breakdown1 region" data-sectionId="7488">
  <h2>Sector Allocation - as at 31/08/2015</h2>
  <div class="chart">&nbsp;</div>
  <div class="clear"></div>
</div>

标签损坏的屏幕截图＆amp;标签上的空白空间。

Answer 1

使用textOverflow：none来避免省略号并使用whiteSpace：'nowrap'以避免换行。看小提琴Here

                                labels: {   align: 'left',
                                            x: 0,                                               
                                            style: {
                                                fontFamily: 'Arial',
                                                fontSize: '8pt',
                                                color: '#000000',
                                                textOverflow:'none', //I changed these two lines
                                                whiteSpace: 'nowrap'

                                            }
                                        },