Ticks屬性在chartist.js中不起作用

Question

下面是一些包含兩個圖表的簡單代碼：JSFiddle ticks屬性適用於折線圖，但不適用於條形圖。有趣的是，當在Chartist網站上發佈時（在示例部分中），它可以正常工作。但我真的需要讓它在我的.js文件中工作。

new Chartist.Bar(
    '#barChart', 
    { 
     labels: ['Week 1', 'Week 2', 'Week 3', 'Week 4', 'Week 5'], 
     series: [ 
      {name: 'one', data: [5, 6, 8, 9, 5]}, 
      {name: 'two', data: [4, 5, 6, 5, 4]}, 
      {name: 'three', data: [2, 4, 5, 2, 1]} 
     ] 
    }, 
    { 
     width: 565, 
     height: 200, 
     axisY: { 
      type: Chartist.FixedScaleAxis, 
      low: 0, 
      high: 10, 
      ticks: [0, 5, 10]    // the ticks don't show up 
     } 
    } 
); 

Answer 1

我一直在尋找你的代碼和示例代碼chartist web之間的性差異。他們正在裝載scripts/all.js JS網址爲：

<script async="" src="scripts/all.js"></script> 

所以，添加的代碼，它會工作：

<script src="//gionkunz.github.io/chartist-js/scripts/all.js"></script> 

這似乎是從main.js不同的模塊（AUTO-SCALE-AXIS.JS）

https://jsfiddle.net/g4sqzseo/4/

這是從沒有爲你工作github project參考chartist.js功能：

/** 
* The fixed scale axis uses standard linear projection of values along an axis. It makes use of a divisor option to divide the range provided from the minimum and maximum value or the options high and low that will override the computed minimum and maximum. 
* **Options** 
* The following options are used by this axis in addition to the default axis options outlined in the axis configuration of the chart default settings. 
* ```javascript 
* var options = { 
* // If high is specified then the axis will display values explicitly up to this value and the computed maximum from the data is ignored 
* high: 100, 
* // If low is specified then the axis will display values explicitly down to this value and the computed minimum from the data is ignored 
* low: 0, 
* // If specified then the value range determined from minimum to maximum (or low and high) will be divided by this number and ticks will be generated at those division points. The default divisor is 1. 
* divisor: 4, 
* // If ticks is explicitly set, then the axis will not compute the ticks with the divisor, but directly use the data in ticks to determine at what points on the axis a tick need to be generated. 
* ticks: [1, 10, 20, 30] 
* }; 
* ``` 
* 
* @module Chartist.FixedScaleAxis 
*/ 
/* global Chartist */ 
(function (window, document, Chartist) { 
    'use strict'; 

    function FixedScaleAxis(axisUnit, data, chartRect, options) { 
    var highLow = Chartist.getHighLow(data.normalized, options, axisUnit.pos); 
    this.divisor = options.divisor || 1; 
    this.ticks = options.ticks || Chartist.times(this.divisor).map(function(value, index) { 
     return highLow.low + (highLow.high - highLow.low)/this.divisor * index; 
    }.bind(this)); 
    this.range = { 
     min: highLow.low, 
     max: highLow.high 
    }; 

    Chartist.FixedScaleAxis.super.constructor.call(this, 
     axisUnit, 
     chartRect, 
     this.ticks, 
     options); 

    this.stepLength = this.axisLength/this.divisor; 
    } 

    function projectValue(value) { 
    return this.axisLength * (+Chartist.getMultiValue(value, this.units.pos) - this.range.min)/(this.range.max - this.range.min); 
    } 

    Chartist.FixedScaleAxis = Chartist.Axis.extend({ 
    constructor: FixedScaleAxis, 
    projectValue: projectValue 
    }); 

}(window, document, Chartist));