javascript - 将 javascript 日期月份输出为文本？使用 C3.js

Question

下面的演示将日期字符串的月份部分输出为数字月份 1-12，并将其应用于x 轴 值。

• 如何将月份输出为文本:Jan、Feb、Mar...？ (即使这被硬编码为文本，我也找不到文本、字符串的类型格式)。

目前 c3 的文档是有限的，到目前为止我的试验没有成功。

    var chart = c3.generate({
      bindto: '#chart',
      data: {
        x: 'x',
        columns: [
            ['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01', '2013-06-01', '2013-07-01', '2013-08-01', '2013-09-01', '2013-10-01', '2013-11-01', '2013-12-01'],
            ['2014', 130, 120, 150, 140, 160, 150, 130, 120, 150, 140, 160, 150]
        ],
        type: 'bar'
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: function (x) { return (x.getMonth() + 1); }
          }
        }
      }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://gopeter.de/misc/c3/c3.js"></script>

<div id="chart"></div>

Answer 1

您需要时间序列的原因是什么？类别可能更好。

为轴类型使用 C3 类别

如果您的 x 轴需要数字，则此方法很好。对于区域、轴范围或单个网格线很有用(我敢肯定还有其他)。您不能为类别数据分配区域。

var chart2 = c3.generate({
    bindto: '#chart',
    data: {
      x: 'x',
      columns: [
        ['x', 1, 2, 3, 4, 5, 6, 7, 8, 9],
        ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
      ],
      type: 'bar'
    },
    axis: {
      x: {
        categories: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine'],
        type: 'categorized'
      }
    },
    regions: [
        {axis: 'x', start: 1, end: 5, class: 'regionX'},
    ]
  });

http://c3js.org/samples/categorized.html

下面这个方法比较简单。当您需要做的最困难的事情是使用 chart.load 函数动态更新 x 轴时，这很有效。

var chart = c3.generate({
  bindto: '#chart',
  data: {
    x: 'x',
    columns: [
      ['x', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      ['2014', 130, 120, 150, 140, 160, 150, 130, 120, 150, 140, 160, 150]
    ],
    type: 'bar'
  },
  axis: {
    x: {
      type: 'categorized',
    }
  }
});

http://c3js.org/samples/data_stringx.html