Javascript C3图表生成班次图表

Question

我正在使用 C3js 图表生成如下班次图表：

这是我的数据格式：

var dataItems = [
{
  "title": "2017/02/04",
  "shifts": [
    {
      "startTime": "05:30:00",
      "endTime": "05:30:00",
      "items": [
        {
          "quantities": {
            "itemA": 600       
           }        
        },
        {
          "quantities": {
            "itemB": 400   
           }    
        },{
          "quantities": {
            "itemC": 500      
           }                                 
        },
      ]
    }
  ]
},
{
  "title": "2017/04/04",
  "shifts": [
    {
      "startTime": "05:30:00",
      "endTime": "05:30:00",
      "items": [
        {
          "quantities": {
            "itemA": 720     
           }          
        },
        {
          "quantities": {
            "itemB": 1000   
           }    
        },{
          "quantities": {
            "itemC": 850     
           }                                  
        },
      ]
    }
  ]
},
{
  "title": "2017/05/04",
  "shifts": [
    {
      "startTime": "05:30:00",
      "endTime": "05:30:00",
      "items": [
        {
          "quantities": {
            "itemA": 450    
           }           
        },
        {
          "quantities": {
            "itemB": 800   
           }    
        },{
          "quantities": {
            "itemC": 1000   
           }                               
        },
      ]
    }
  ]
}
];

我试过一个类似的例子：JsFiddle。但效果不好。 想法我想创建一个条形图，像图像一样具有 xAxis 格式。

有人可以就数据或上面的班次图表之类的示例向我提出建议吗？

谢谢，

Answer 1

您调整 x 轴标签位置的代码是正确的。
只需将其放入函数中，并在绘制图表时调用。

看到这个fiddle或者这个sn-p：

var chart = c3.generate({
    ...
    onrendered: pushTheYearsDown,
    onresized: pushTheYearsDown
});

和

// push the years down
function pushTheYearsDown() {
  d3.selectAll('#chart .tick text tspan')[0].forEach(function (d) {
      var tspan = d3.select(d);
      if (!isNaN(Number(tspan.text())))
          tspan.attr('dy', '2em')
      else 
          tspan.attr('dy', '0.5em')
  });
}