ラベルが長い場合、グラフの棒グラフのラベルが重なって表示されます

Question

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); 
    }); 
}) 

Answer 1

ラベルがレンダリングされた後、私はいくつかのコードを実行しようとしましたが、私の経験が少し限られています。私は、X軸のラベルの最大幅を見つけようとし、親の最小幅（以下のように）を設定し、ラベルを無効にして再描画をトリガーします。たぶんあなたはそれを行う方法を見つけることができます。スペースを入れずにテキストを設定

を、レイアウトが行われたときに、その後、それらを追加します。他のすべてが失敗した場合、あなたはこれらの間に合わせのn-ソリューションで「カンニング」ができ

。

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

あるいは、（ラベルはいえ、ものになるかどうか広い知っている必要があります）ページにCSSを追加します。

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