2016-11-22 73 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軸顯示在圖表內而不是在它之下。請參閱小提琴

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

回答

1

我建議使用high/lowreferenceValuescaleMinSpace代替。這些都是不言自明的,low是軸上的最低值,high是最高值,referenceValue是始終顯示的值。 scaleMinSpace是該軸上兩條線之間的最小距離。

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

Fiddle example on the above.

但如果你只是想圖表縮放顯示所有的數據,你可以只指定scaleMinSpace,其餘的將自動發生。 Fiddle example.