以日期为 x 轴的 C3.js 条形图答案

【问题标题】：C3.js bar plot with dates as x axis以日期为 x 轴的 C3.js 条形图
【发布时间】：2015-12-07 22:20:53
【问题描述】：

我正在尝试使用带日期的 X 制作 C3 条形图。我已经在按天聚合的连续日期中格式化了数据。

我已经创建了一个我认为可行的小提琴：https://jsfiddle.net/8aL1stcs/

这样的情节运行良好，这里是 X 轴注释掉的小提琴版本：https://jsfiddle.net/8aL1stcs/1/

var elementID = "#myPlot";
var myData = {};
//myData.x = 'x';
//myData.xFormat = "%Y-%m-%d";
myData.type = 'bar';
myX = ["2015-11-20", "2015-11-21", "2015-11-22","2015-11-23", "2015-11-24"];
myY = [1,2,3,4,5];
myX.splice(0,0,'x');
myY.splice(0,0,'New Reports');
myData.columns = [];
//myData.columns.push(myX);
myData.columns.push(myY);
var chart = c3.generate({
  bindto: elementID,
  data: myData,
  size: {
    height: 480,
    width:400,
  },
  bar: {
    width: {
        ratio: 0.5 // this makes bar width 50% of length between ticks
    }
    // or
    //width: 100 // this makes bar width 100px
  }
});

基本上我想在这里模仿这个情节：

为此，我认为我需要使用一些自动化的方式来处理 x-ticks。换句话说：我不想手动设置刻度。

【问题讨论】：

标签： javascript d3.js c3.js

【解决方案1】：

你在你的 c3 生成 json 中错过了这个。

axis: {
        x: {
          type: 'timeseries',
        tick: {
                format: "%b-%d"//format in which you want the output
            }
        },

      }

工作代码here

希望这会有所帮助！

【讨论】：