如何使用自动时间序列x轴将键/值传递到多行C3.JS图表？

Question

我有时间序列数据。在服务器上，我生成一个x数组和三个值的数组（全部长度相等）。

但是，x数组并不总是按月进行。有时它会跳过几个月。发生这种情况时，x轴会非常分散。是否有一种很好的方法可以在x轴上生成一系列标签，并为不同的行传递键值，以便整个行的值仍然在图表中显示。

目前我有：

var chart = c3.generate({ 
     bindto: "#" + this.chart.chartId, 
     data: { 
      x: 'x', 
      columns: [ 
       ["x", "2015-01-01", "2015-02-01, "2015-06-01", "2016-01-01"], 
       ["data1", 5, 8, 2, 9] 
       ["data2", 3, 10, 2, 1] 
       ["data3", 1, 8, 4, 9] 
     }, 
     subchart: { 
      show: true 
     }, 
     axis: { 
     x: { 
      type: 'timeseries', 
      extent: ['2015-01-01', '2016-01-01'], 
      tick: { 
      format: '%Y-%m-%d' 
      } 
     } 
    } 

}）; 任何意见是赞赏解决这个间隔问题的时间序列。

Answer 1

您似乎在询问有关使用c3寻址x轴的问题，但您的代码表明您已开放给使用D3的解决方案。看你的JSON字符串，看到节点x.extent我建议想是这样的：

// setup x axes 
var minDate = yourJSON.x.extent[0], maxDate = yourJSON.x.extent[1], 
xScale = d3.time.scale().domain([maxDate,maxDate]).range([0, width]), 
xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickFormat(d3.time.format("%Y-%m-%d")); 

var svg = d3.select("#chart-content").append("svg")...etc; 

     // x-axis 
     svg.append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis) 
      .append("text") 
      .attr("class", "label") 
      .attr("x", width) 
      .attr("y", -6) 
      .style("text-anchor", "end"); 

既然你指定一个范围，D3将在这些日期间暴露时间。