2016-11-22 3 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/low, referenceValuescaleMinSpace을 사용하는 것이 좋습니다 바이올린을

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

답변

1

를 참조하십시오. 그것들은 자명하지만, low은 축상에서 가장 낮은 값이고, high이 가장 큰 값입니다. referenceValue은 항상 표시되는 값입니다. scaleMinSpace은 해당 축에서 두 줄 사이의 최소 거리입니다. 그냥 차트가 모든 데이터를 표시하도록 확장 할 경우

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

Fiddle example on the above.

는하지만, 당신은 단지 scaleMinSpace를 지정할 수 있고, 나머지는 자동으로 발생합니다. Fiddle example.