如何使用自動時間序列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將在這些日期間暴露時間。