Chartist js 图表显示不正确

Question

我正在使用 chartist.js 创建图表，并使用 FixedScaleAxis 来精确控制我的 y 轴上的点。

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 轴显示在图表内而不是图表下方。请参阅 fiddle

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

Answer 1

我建议改用 high/low、referenceValue 和 scaleMinSpace。这些都是不言自明的，low 是轴上的最低值，high 是最高值，referenceValue 是始终显示的值。 scaleMinSpace 是该轴上两条线之间的最小距离。

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

Fiddle example on the above.

但是如果您只想让图表缩放以显示所有数据，您可以只指定 scaleMinSpace，其余的将自动发生。 Fiddle example.

Chartist js 图表显示不正确

Chartist js chart displaying incorrectly

chartist.js