2016-11-22 52 views
0

chartist.jsを使用してグラフを作成していて、FixedScaleAxisを使用してy軸の点を正確に制御しています。Chartistのjsグラフが正しく表示されない

var data = { 
    labels: [ "1995", 
          "1996", 
          "1997", 
          "1998", 
          "1999", 
          "2000", 
          "2001", 
          "2002", 
          "2003", 
          "2004", 
          "2005", 
          "2006", 
          "2007", 
          "2008", 
          "2009", 
          "2010", 
          "2011", 
          "2012", 
          "2013", 
          "2014", 
          "2015"], 
    series: [ 
    [ 2.92, 
           2.83, 
           2.69, 
           2.57, 
           2.4, 
           2.27, 
           2.19, 
           2.15, 
           2.06, 
           2.06, 
           1.92, 
           1.82, 
           1.8, 
           1.76, 
           1.72, 
           1.71, 
           1.61, 
           1.56, 
           1.52, 
           1.41, 
           1.35] 
    ] 
}; 

var options = { 
    height:400, 
    seriesBarDistance: 100, 
    axisY : { 
      type : Chartist.FixedScaleAxis, 
      ticks : [ 0, 0.3, 0.6, 0.9, 1.2, 1.5, 1.8, 2.1, 2.4, 2.7, 3.0 ] 
      } 
}; 

new Chartist.Line('.ct-chart', data, options); 

しかし、高さを加えて追加すると、グラフの下にx軸が表示されます。私が代わりにhigh/lowreferenceValuescaleMinSpaceを使用することをお勧めフィドル

http://jsfiddle.net/Lnhpwn8x/19/

答えて

1

を参照してください。それらはかなりわかりやすく、lowは軸上の最小値です。highが最高値です。referenceValueは常に表示される値です。 scaleMinSpaceは、その軸上の2本の線の間の最小距離です。

axisY : { 
     low: 1.2, 
     referenceValue: 3, 
     scaleMinSpace: 40 
     } 

Fiddle example on the above.

しかし、あなただけのチャートは、すべてのデータを表示するように拡張したい場合は、あなただけscaleMinSpaceを指定することができ、残りは自動的に行われます。 Fiddle example.

関連する問題