javascript - Ticks 属性在 chartist.js 中不起作用

Question

这是一些带有两个图表的简单代码:JSFiddleticks 属性适用于折线图，但不适用于条形图。有趣的是，它在 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 url 为:

<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));