多軸チャートの作成にFlotr2を使用しています..
Flotr2 多軸チャート画像は次のとおりです。
この多軸チャートでは、右側の軸ラベルとタイトルが重なっています。
読みやすくするために、軸ラベルとタイトルの間にスペースを設ける方法が必要です。
この多軸 Flotr2 チャート URL の参照を追加しています: http://www.humblesoftware.com/flotr2/#!advanced-titles
誰でも私を助けてくれますか..
多軸チャートの作成にFlotr2を使用しています..
Flotr2 多軸チャート画像は次のとおりです。
この多軸チャートでは、右側の軸ラベルとタイトルが重なっています。
読みやすくするために、軸ラベルとタイトルの間にスペースを設ける方法が必要です。
この多軸 Flotr2 チャート URL の参照を追加しています: http://www.humblesoftware.com/flotr2/#!advanced-titles
誰でも私を助けてくれますか..
ここで見られるように、これはバグです: https://github.com/HumbleSoftware/Flotr2/issues/151
私にとって良い回避策は、グラフの右隅に軸のタイトルがある画像をページ html に入れることです。
さて、今のところバグと一緒に暮らしてください。目盛りラベル (数字) にスペースを追加すると、軸ラベル用のスペースを作ることができます。
function addSpace(v,axis) {
return Flotr.defaultTickFormatter(v,axis)+" ";
}
...
y2axis: title:"Leistung (W)", tickFormatter:addSpace,
私には 3 つのスペース (0x20) で十分です。
後で私が見つけた、IMHO、ist は内部の getBestTextAlign メンバー関数のバグです。2 つのあいまいな角度依存の配置調整を削除すると、すべて正常に動作します。
getBestTextAlign: function(angle, style) {
style = style || {textAlign: 'center', textBaseline: 'middle'};
angle += Flotr.getTextAngleFromAlign(style);
// if (Math.abs(Math.cos(angle)) > 10e-3)
// style.textAlign = (Math.cos(angle) > 0 ? 'right' : 'left');
// if (Math.abs(Math.sin(angle)) > 10e-3)
// style.textBaseline = (Math.sin(angle) > 0 ? 'top' : 'bottom');
return style;
},
このコードの背後にあるアイデアはわかりません。まったくコメントされていません。申し訳ありませんが、適切なコーディング方法はありません。
grid オブジェクトの labelMargin を変更してみてください。
grid : {
verticalLines : false,
backgroundColor : 'white',
labelMargin: 20
},
少しは役立つようですが、すべてのラベルに影響します。