刻度屬性在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網站中您的代碼與示例代碼之間的區別 。 他們正在將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不同的模塊（ AUTO-SCALE-AXIS.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));