2017-12-08 11 views
0

私はbillboard.jsで小さなグラフを作成していますが、チャートを読みやすくするために縦軸のティック数を減らしたいと考えています。これは、tick countを設定することで実現できますが、目盛りのラベルがきれいに見えるように、正確に選択した数に近い数値を動的に選択するのではなく、正確な数の目盛りを強制します。たとえば、このjsfiddleは非最適目盛りラベルのセットを実証参照してください。billboard.jsグラフのティック数を減らす

var chart = bb.generate({ 
    bindto: "#chart", 
    data: { 
     type: "bar", 
     columns: [ 
      ["data1", 30, 200, 100, 170, 150, 250], 
      ["data2", 130, 100, 140, 35, 110, 50] 
     ] 
    }, 
    size: { 
     width: 150, 
     height: 150 
    }, 
    legend: { 
     show: false 
    }, 
    axis: { 
     y: { 
     tick: { 
      count: 5 
     } 
     } 
    } 
}); 

私はこれを固定する二つの方法を想像することができます。まず、チャートを描画した後、よりインテリジェントにティックを変更するために、内部d3軸オブジェクト(chart.internalの下のどこか)を呼び出します。次に、データの範囲を抽出し、d3軸とスケールオブジェクトを作成し、tickboard.js関数を使用して設定するティック数を計算することです。第1のアプローチは、より少ないコードを必要とするので好ましい。これを行う方法はありますか?

答えて

0

ティックカウントを設定する代わりに、tick.valuesを処理できます。

axis: { 
    y: { 
     tick: { 
      values: [50,100,150,200,250] 
     } 
    } 
} 

enter image description here

関連する問題