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

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

1 个答案: