ハイチャートY軸水平タイトル

Question

ハイチャートを使用して簡単な折れ線グラフを作成しています。デフォルトでは、Y軸には縦にタイトルが付いていますが、一番上に水平にしたいと思います。

短いストーリー - 私は左に余分な間隔を残しています。これは私が私のY軸を定義する方法である：

yAxis: [{ 
    title: { 
    align: "high", 
    textAlign: "left", 
    rotation: 0, 
    offset: 0, 
    margin: 0, 
    y: -20, 
    x: -15, 
    text: "some long axis title" 
    }, 
    labels: { 
    align: "left", 
    y: -5, 
    x: -15 
    } 
}] 

は、実施例のためのフィドルを参照してください。http://jsfiddle.net/zc1Lc5c6/3/

は、Y軸、テキストを変更してみてくださいと何が起こるかをご覧ください。私は負のspacingLeftを使って修正することができますが、軸のタイトルは動的であり、可能な場合はより良い方法を好むでしょう。

これはバグですか、何か逃したでしょうか？

Answer 1

これはバグだと思いますが、この場合の簡単な回避策は、左余白を設定することです。 例えば、このフィドルを参照してください：http://jsfiddle.net/zc1Lc5c6/6/

フィドルコード：

$(function() { 

    $('#container').highcharts({ 
    title: "", 
    chart: { 
     spacing: [5, 5, 5, 5], 
     marginLeft: 32 
    }, 
    legend: { 
     layout: "horizontal", 
     align: "right", 
     verticalAlign: "top", 
     itemDistance: 10, 
     symbolHeight: 8, 
     symbolPadding: 1, 
     padding: 0, 
     margin: 20, 
     itemMarginBottom: 3 
    }, 
    plotOptions: { 
     series: { 
     dataLabels: { 
      enabled: false 
     }, 
     marker: { 
      symbol: "circle", 
      radius: 4, 
      states: { 
      hover: { 
       radiusPlus: 1 
      } 
      } 
     }, 
     showInLegend: true 
     }, 
     line: { 
     states: { 
      hover: { 
      halo: { 
       size: 8 
      } 
      } 
     } 
     } 
    }, 
    series: [{ 
     type: "column", 
     name: "First column", 
     data: [5, 2, 13, 3, 3, 6, 2, 3, 2, 1, 5, 2, 1] 
    }, { 
     type: "line", 
     name: "First line", 
     data: [3, 1, 7, 1, 1, 5, 1, 2, 1, 1, 3, 1, 0], 
     yAxis: 1, 
     showInLegend: false 
    }, { 
     type: "column", 
     name: "Second column", 
     data: [7, 1, 2, 6, 2, 6, 4, 2, 3, 3, 6, 2, 3] 
    }, { 
     type: "line", 
     name: "Second line", 
     data: [3, 0, 2, 3, 1, 3, 2, 2, 3, 1, 3, 2, 2], 
     yAxis: 1, 
     showInLegend: false 
    }], 
    yAxis: [{ 
     visible: true, 
     tickPosition: "inside", 
     offset: 0, 
     title: { 
     text: "# tasks", 
     align: "high", 
     textAlign: "left", 
     rotation: 0, 
     offset: 0, 
     margin: 0, 
     y: -5, 
     x: -7 
     }, 
     labels: { 
     align: "right", 
     y: -5 
     } 
    }, { 
     visible: true, 
     tickPosition: "inside", 
     offset: 0, 
     type: "linear", 
     title: { 
     text: "# completed", 
     align: "high", 
     textAlign: "left", 
     rotation: 0, 
     offset: 0, 
     margin: 0, 
     y: 12, 
     x: -7 
     }, 
     labels: { 
     align: "right", 
     y: 12 
     } 
    }], 
    xAxis: { 
     labels: { 
     y: 16 
     }, 
     categories: [ 
     "2016 W31", 
     "2016 W32", 
     "2016 W33", 
     "2016 W34", 
     "2016 W35", 
     "2016 W36", 
     "2016 W37", 
     "2016 W38", 
     "2016 W39", 
     "2016 W40", 
     "2016 W41", 
     "2016 W42", 
     "2016 W43" 
     ] 
    } 
    }); 
});