c3グラフのy軸のスケールを動的に設定するにはどうすればよいですか？

Question

私はグループ化されたデータを持つc3チャートを作成しています。グループ化されたデータを超えてはならない最大値を示すy軸グリッド線を作成したいと思います。

ので、y軸のグリッドラインが「最大」

と呼ばれることができ、私は、グリッドを作る方法を知っているが、グループ化されたデータは、道グリッド値を下回る可能性があるため、それが常に表示されません。しかし、私は常にグリッドを表示したい。

私はy軸のパディングを見ましたが、ピクセルを使用しており、正確にするのは難しいです。

y軸を設定して、y軸グリッド線の値が5より大きいように表示されていますか？

Answer 1

C3には、「Y軸を最大値または最大値に設定する」という設定がありません。ただし、以下のような方法でグリッド線を追加したとします。私は、グリッド線の値と同じになるように、最大​​値を設定し、小さなスペースを作成するために、パディングを使用している。この場合、

grid: { 
    y: { 
     lines: [{ value: 20 }], 
    } 
}, 
axis: { 
    y: { 
     padding: {top:5, bottom,0}, 
     max: 20 
    } 
} 

：あなたはその後、ここに示すy軸のパディングと設定を使用して最大値を設定することができますその上に。これは、データがグリッド線の下にある場合を処理します。ただし、データが（グリッドライン+パディング）合計を超えると、最大設定が固定されているため、グラフはそのデータに適応しません。データの最大値より大きい場合はjavascriptを使用してこの最大値を動的に変更する必要があります。

if(highValue > gridlineValue) 
    chart.axis.max(highValue); 
else 
    chart.axis.max(gridlineValue); 

データがグリッド線を超えないように気付いたので、この回答の最初の部分に進むことができます。他の誰かがよりダイナミックなソリューションを望む場合に備えて、私はここに残りました。グリッド線よりも高い値に明示的に設定する場合は、パディングなしで最大値を使用することもできます。

Answer 2

この記事を書いている時点では、実際にy-maxを特定のmaxに設定してから動的にリセットする方法があります。これを行うには、maxをundefinedに設定します（chart.axis.max(undefined);など）。

ここでは、jsfiddleがあります。