Question

我正在使用Charts.js并使用它来显示不同时间段的数据，时间段基于用户输入。我在x轴上显示日期标签，但有时这些标签的范围可以是0-12个月。我想动态改变这个，这样如果日期范围超过2个月，那么标签会每个月显示一次？该范围内的数据也将按月分组。就像使用Google Analytics时一样。

以下是我用来生成图表的Javascript。

var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: ['babel-polyfill', './src/js/index.jsx'],

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },

  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
      },
      {
         test: /\.jsx?$/,
         exclude: [/node_modules/],
         use: [{
           loader: 'babel-loader',
           options: { presets: ['es2015', 'react', 'stage-0'] }
         }]
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader'}
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader'},
          { loader: 'less-loader' },
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/i,
        use: {
          loader: 'url?limit=10000!img?progressive=true'
        }
      },
      { test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }
    ]
  },

  resolveLoader: { moduleExtensions: ["-loader"] },

  devtool: 'source-map',

  resolve: {
    extensions: ['*', '.js', '.jsx'],
    alias: {
      Themes$: path.resolve(__dirname, 'src/themes/')
    }
  },

  plugins: [
    new CopyWebpackPlugin([
      { from: './src/html' },
      { from: './src/img/favicon.ico', to: './img'}
    ])
  ],

  devServer: {
    inline: true,
    hot: true,
    contentBase: path.join(__dirname, 'dist'),
    port: 5000
  }
}

Answer 1

如果我正确理解了您的问题，则需要在刻度下添加刻度，在这种情况下，您需要添加xAxes。您可以在刻度线中指定步长。步长是每次增加多少。在步长中，您可以调用确定所需步长的函数。因此，您可以创建一个名为calcualteStepSize的函数，并在日期超过2个月时传递日期，然后返回步长1。下面只是一些伪代码

ticks: {
        stepSize: calcualteStepSize(data)
       }

function calcualteStepSize(data) {
  if data range is greater than 2 months
    return 1 
  else return some other calculation
}

Charts.js动态蜱虫

1 个答案: