flotで目盛りラベルのサイズを制御する方法

StackOverflow https://stackoverflow.com/questions/459947

  •  19-08-2019
  •  | 
  •  

質問

flotで表示する基本的な棒グラフがあります（5本の棒、ステータスごとの％を表示）。

$.plot($("#placeholder"), [
    {
        label: 'Failed',
        data: [[0,10]],
        bars: { show: true }
    },
    {
        label: 'Passed',
        data: [[1,15]],
        bars: { show: true }
    },
    {
        label: 'Not Run',
        data: [[2,30]],
        bars: { show: true }
    },
    {
        label: 'Blocked',
        data: [[3,5]],
        bars: { show: true }
    },
    {
        label: 'In Progress',
        data: [[4,40]],
        bars: { show: true }
    }
],
{
    xaxis: {
        ticks: [[0.5, "Failed"], [1.5, "Passed"], [2.5, "Not Run"], [3.5, "Blocked"], [4.5, "In Progress"]]
    },
    legend: {
        show: false
    }
});

x軸の目盛り値に使用されるフォントが少し大きすぎることがわかりました。特に、グラフが小さい次元で表示されている場合などです。 240x100。 APIドキュメントを読みましたが、目盛りラベルのサイズを制御する方法が見つかりません。

これはOOTB可能ですか？

役に立ちましたか？

解決

APIを介してフォントサイズを設定できるようには見えませんが、cssを使用して目盛りラベルのサイズを設定できます。

.tickLabel { font-size: 80% }

他のヒント

APIから直接の例を次に示します。

xaxis:{
   font:{
      size:11,
      style:"italic",
      weight:"bold",
      family:"sans-serif",
      variant:"small-caps"
   }
}

http://flot.googlecode.com/svn/trunk/API.txt

上記の2つの答えは、「実際の」テキストを使用しないため、最新バージョンのflotでは機能しません（代わりにテキストが描画されます）。代わりに、これらのオプションを指定します。

{xaxis: {font: size: some_number}, yaxis: {font: size: some_number}}

（some_numberをポイント単位の希望のサイズに置き換えます）

次を使用しました：

CSSファイル/ SCSSファイル 

#graph_label .tickLabel{

     font-size: 50%;
  }

Index.htmlまたはグラフエリアをプロットする場所 

$.plot($("graph_label"), [dataArrayReference], options);

参照：@BrentMの上記の回答

PS：0.8.1より前のFlotバージョンを使用しているので、最新バージョンがどのように機能するかについてはわかりません

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top