高圖表條形圖標籤與圖形重疊時標籤很長

我需要xAxis標籤纔能有工具提示。但是當我使用格式化工具添加工具提示時，長標籤往往與圖表重疊，而不是將其推向右側。此外，只有當標籤有空白時，纔會發生這種情況，如果刪除了空格然後正常工作並將圖表向右推。這個問題顯示在此琴：http://jsfiddle.net/W5wag/44 高圖表條形圖標籤與圖形重疊時標籤很長

$(function(){ 
    var chart1; 
    $(document).ready(function(){ 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'bar' 
     }, 
     xAxis: { 
      categories: ['cat1aaaaaaaaaaaaaaaasadadadad adadaaaaaaaaaaaaaaaaaaaaa', 'cat2', 'cat3', 'cat4', 'cat5'], 
      labels: { 
       formatter: function() { 
        return '<span title="abc">' + this.value + '</span>'; 
       }, 
       useHTML: true, 
       style: { 
        whiteSpace: 'nowrap' 
      } 
     }, 
     }, 

    }; 

    options.series = [{ 
      data: [3, 4, 4, 3, 9] 
     }]; 
    chart1 = new Highcharts.Chart(options); 
    }); 
})

來源

2017-05-09 revant

如果禁用useHTML選項圖表推到右側，標題作品以及http://jsfiddle.net/W5wag/46/ – morganfree

我試圖執行標籤已經呈現後一些代碼，但我的經驗是有點限制在那裏。我試圖找到任何x軸標籤的最大寬度，將其設置爲父級的最小寬度（如下所示），並使標籤無效以觸發重繪。也許你可以找到一種方法來做到這一點。

如果一切都失敗了，你可以「欺騙」通過這些快速正骯髒的解決方案：

設置不帶空格的文字，並將其添加之後，當佈局完成。

window.setTimeout(()=>document.querySelector('span[title=abc]') 
        .innerHTML='cat1aaaaaaaaaaaaaaaasadadad adadadaaaaaaaaaaaaaaaaaaaaa', 500);

或者，添加CSS頁面（這需要知道標籤將有多寬是，雖然）：

.highcharts-axis-labels.highcharts-xaxis-labels > * { min-width: XXXpx }

來源

2017-05-09 19:49:26

高圖表條形圖標籤與圖形重疊時標籤很長

回答

相關問題