グラフのY軸のタイトルを動的に切り捨てる方法ハイチャートのサイズ変更/リフロー

Question

私は、サイズ変更可能なdivにハイチャートチャートを持っています。応答性のあるY軸タイトルを得る方法はありますか？

このplunkerで試してみてください：http://plnkr.co/edit/3DXRlGkBlGoRdwxjP1rG?p=preview

私は、これらのオプションを使用しているが、タイトルの幅（回転高さ）は全く変化していないようだ。

chart: { 
    reflow: true 
}, 
yAxis: [{ 
    title: { 
    text: "Really really long Y-Axis Title. aaaaaa aaaaaa aaaaaaa aaaaaa aaaaa", 
    style: { 
     width: "100%", 
     whiteSpace: "nowrap", 
     textOverflow: "ellipsis" 
    } 
    } 
}] 

};

Answer 1

グラフを最初に読み込んだときにテキストの幅を設定してから、サイズ変更時に再度幅を設定することができます。

chart: { 
    events: { 
    load: function() { 
     this.yAxis.map((axis) => { 
     axis.update({ 
      title: { 
      style: { 
       width: this.plotHeight 
      } 
      } 
     }); 
     }); 
    } 
    } 
} 

plotHeight Iは、軸のタイトルの最大幅のために用いられるグラフ描画領域の高さです。

バージョン5.0.7以降を使用している場合は、render eventを使用して、チャートの読み込みと各描画で起動することができます。私はまだバージョン4.xになっていますので、loadイベントを自分の別のイベントで使用しなければなりませんでした（私の場合、jQueryクリックによってトリガされるイベント）

楕円が必要な場合は、ハイチャートタイトルがSvgRendererプロトタイプにbuildText関数にフックしてレンダリングされた後pluginでテキスト値を更新します

(function (H) { 

    H.wrap(H.SVGRenderer.prototype, 'buildText', customBuildTextFunc); 

    function customBuildTextFunc(proceed, wrapper) { 

    // original function 
    proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 

    var yAxisClass = 'highcharts-yaxis-title'; 

    var isYAxisTitle = wrapper.textStr 
     && wrapper.element 
     && wrapper.element.classList 
     && wrapper.element.classList[0] === yAxisClass; 

    if (isYAxisTitle) { 

     var $container = $('<div></div>').append(wrapper.element.innerHTML); 

     var $tspans = $container.find('tspan'); 

     var $first = $tspans.eq(0); 

     $first.append('...'); 

     $container.empty().append($first); 

     wrapper.element.innerHTML = $container.html(); 
    } 
    } 

}(Highcharts)); 

私は適切な省略記号（...）を使用getSVG()の問題を持っていたので、私はちょうど使用3つの完全な停止（私の省略記号はボックスとしてレンダリングされた..間違ったエンコーディングか何か、私は推測する）。

Answer 2

私はそれが奇妙な行動のビットだと思い、私はすべての部品が再評価されることを期待します。しかし、結果として得られるGraphはSVGなので、リフローではいくつかの要素が忘れ去られていると思います。 あなたの含むDIVのサイズを変更した後、スペースやサイズの完全な再計算を強制することができます：あなたは、チャートの高さに応じてテキストの幅を設定するresponsive.rulesを使用することができます

$("#outer").height(498).width(498); 
c0.yAxis[0].setTitle({ 
    text: 'Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll', 
    style: { 
     width: $('#outer').height()-100, 
     whiteSpace: "nowrap", 
     textOverflow: "ellipsis" 
    }}, true); 
c0.reflow(); 

Answer 3

。

グラフの高さが300およびそれ以外の場合は400%未満の場合、次のようなオプションを使用すると、テキストの幅は100%になります。

yAxis: [{ 
    title: { 
    text: "Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll. Really really long Y-Axis Labelllllllll", 
    style: { 
     width: "400%", 
     whiteSpace: "nowrap", 
     textOverflow: "ellipsis" 
    } 

    } 
}], 
responsive: { 
    rules: [{ 
    condition: { 
     maxHeight: 300 
    }, 
    chartOptions: { 
     yAxis: { 
     title: { 
     style: { 
      width: '100%' 
     } 
     } 
     } 
    } 
    }] 
}, 

例：あなたは、古いバージョンを使用したい場合は、@FlorianHeerの答えが作業を行うようhttp://plnkr.co/edit/h852BIAdPo3lCIesFmBT?p=preview

応答規則は、Highcharts 5で追加されました。