2016-11-22 69 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.