Question

我试图在x轴上显示完整标签，但是highcharts会继续将其剪切掉。我尝试使用其他帖子中讨论的裁剪，溢出和边距选项无济于事。唯一有效的选择是使图表的div高度变得荒谬。

＆＃13;

 $('#da-expulsions').highcharts({
     chart: {
       type: 'column',
       renderTo: 'da-expulsions',
     },
     data: {
       googleSpreadsheetKey: '1Nx8zcIi0ULxytLmra0A9N11-llzJCDVH2-7SbK_k5-U',
       startColumn: 0,
       startRow: 0,
       googleSpreadsheetWorksheet: 19,
     },
     title: {
       text: 'Expulsion rates at campuses with highest expulsion rates over time'
     },
     yAxis: {
       min: 0,
       max: 30,
       breaks: [{
         from: 12,
         to: 24,
         breakSize: 1
       }],
       tickInterval: 3,
       title: {
         text: 'Expulsions Rate (%)'
       },
       labels: {
         formatter: function() {
           return this.value + '%';
         }
       }
     },
     tooltip: {
       valueSuffix: '%'
     },
     xAxis: {
       type: 'category',
       title: {
         text: 'School'
       },
     },
   });

＆＃13;

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/data.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.5/modules/broken-axis.js">
  </script>
</head>

<body>
  <div id="da-expulsions"></div>
</body>

＆＃13;

Answer 1

“使图表的div高度变得荒谬”是添加截断视图的原因。如果将鼠标悬停在xAxis标签上，则会显示全文。如果要增加xAxis标签的可用大小，可以。另一个建议是使用“条形”格式，其中xAxis是垂直的，然后调整xAxis标签的字体大小，尽管这不是100％准确。省略号有什么问题？

labels: {
    useHTML: true,
    style: {
        fontSize: '8px',
        width: '300px'
    }
}

x轴标签与Highcharts柱形图截断

1 个答案: