Ticks属性在chart .js中不起作用

Question

下面是一些带有两个图表的简单代码刻度属性适用于折线图，但不适用于条形图。有趣的是，它的工作很好，当张贴在图表网站(在例子部分)。但是我真的需要让它在我的。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

我正在寻找您的代码和示例代码在图表web之间的差异。他们加载scripts/all.js js url为:

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

所以，添加这段代码，它就可以工作了:

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

这似乎是一个不同的模块(AUTO-SCALE-AXIS.JS)从main.js

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

这是github项目参考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));