Question

Highcharts正在截断子弹图上的x轴标签。我想防止这种情况发生，并始终显示全文而不缩短。

enter image description here

我试过了

.highcharts-container { overflow: visible !important; }
.highcharts-axis-labels text
    { 
    overflow: visible !important;  
}

但似乎SVG正在进行截断和省略，而不是通过查看渲染的标记来判断CSS。

<text x="229.0625" style="color: rgb(96, 96, 96); cursor: default;     font-size: 9px; padding: 0px; fill: rgb(96, 96, 96);" text-anchor="middle"   transform="translate(0,0)" y="32" opacity="1">
<tspan>47…</tspan>
<title>47.5k</title>
</text>

我尝试在javascript中添加以下属性：

labels: {
    autoRotation: false,
    style: {
    width: '200px',
    'min-width': '200px'
},

但它不起作用。如何防止highcharts截断标签文本？

Answer 1

为该标签设置合适的样式，请参阅API。

示例：

(function($) {
    $.fn.myPlugin = function() {
        alert($(this).attr('id'));
    }
}(jQuery));

Answer 2

尝试自己覆盖默认行为。

  xAxis: {
    labels: {
      useHTML: true,
      formatter() {
        let label = this.value;
        let title = this.value;
        let style = `text-overflow: ellipsis; overflow: hidden;`; // <- YOUR OWN STYLE
        return `<div style="${style}" title="${title}">${label}</div>`;
      }
    },
  },

样式参考：https://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts

Answer 3

您只需要添加textOverflow属性即可，就像下面的给定代码一样，以使第一个和最后一个刻度值完全可见。

xAxis: {
        labels: {
                 style: {
                         fontSize: '9px',
                         color: '#a1a5aa',
                         textOverflow: 'none'
                        }
                }
       }

Answer 4

对于条形图，我使用以下xAxis定义来获得较长的类别名称，使其显示在绘图区域内（条形图上方），而不会用椭圆换行或截断：

'xAxis' => [
    'categories' => ['long category one', 'long category two', 'etc'],
    'labels' => [
      'align' => 'left',
      'x' => 3,
      'y' => -5,
      'style' => [
        'fontSize' => '12px',
        'textOverflow' => 'none',
        'whiteSpace' => 'nowrap',
      ],
    ],
  ],

在the docs中找到了whiteSpace设置。

https://jsfiddle.net/wittski/5hpag62n/2/

如何防止highcharts用省略号缩短标签

4 个答案: