爲什麼此C3.JS圖表不顯示X軸上的時間序列？

此圖表被正常再現，但不再顯示在底部的時間序列（抱歉缺乏小提琴的）：爲什麼此C3.JS圖表不顯示X軸上的時間序列？

 var c3chart = c3.generate({ 
      bindto: "#TrendChart", 
      size: { 
       //width: width, 
       height: height * 2 
      }, 
      subchart: { 
       show: true 
      }, 
      data: { 
       x: "x", 
       xFormat: "%d/%m/%Y %H:%M", 
       columns: [c3dates, c3Current, c3data], 
       names: { 
        data1: "Tags", 
        data2: "Originals" 
       }, 
       colors: { 
        data1: 'rgb(46, 155, 46)', // '.chart-edit-line', 
        data2: 'rgb(124, 215, 255)' // 'chart-history-line' 
       }, 
       types: { 
        data1: 'line', 
        data2: 'area' 
       }, 
       axes: { 
        data2: "y", 
        data2: 'y2' 
       } 
      }, 
      axis: { 
       x: { 
        show: true, 
        type: 'timeseries', 
        tick: { 
         format: '%H:%M', 
         values: [ 
          '21/02/2017 00:00', '21/02/2017 01:30', '21/02/2017 03:00', '21/02/2017 04:30', 
          '21/02/2017 06:00', '21/02/2017 07:30', '21/02/2017 09:00', '21/02/2017 10:30', 
          '21/02/2017 12:00', '21/02/2017 13:30', '21/02/2017 15:00', '21/02/2017 16:30', 
          '21/02/2017 18:00', '21/02/2017 19:30', '21/02/2017 21:00', '21/02/2017 22:30', 
          '21/02/2017 00:00' 
         ] 
        }, 
        padding: { 
         left: 0, 
         right: 0 
        } 
       }, 
       y: { 
        show: true, 
        min: 0, 
        padding: { 
         top: 20, 
         bottom: 0 
        } 
       }, 
       y2: { 
        show: true, 
        min: 0, 
        padding: { 
         top: 20, 
         bottom: 0 
        } 
       } 
      }, 
      zoom: { enabled: true } 
     });

來源

2017-03-06 Matt W

我有這竟然是動態的高度類似的問題。你能檢查你的身高是否正確縮放？ size：{height：height * 2} – Akoya

原來是'axis.x.tick.values'數組。一旦我更新了代碼以使用真實數據而不是填充'c3current'和'c3data'的虛擬數據，'axis.x.tick.values'數組中的日期不同步，因此它不會顯示它們。我寫了一些代碼來匹配它們，並重新出現。 –

@akoya雖然這是一個好主意。我上週實際上遇到了同樣的問題，並以同樣的方式進行修復。 –

原來的「axis.x.tick.values」陣列必須具有相同的日期作爲圖表中的值，或者X軸上沒有任何內容可供圖表呈現。我用這個代碼，以確保它們匹配起來：

var timeindices = [ 
    '21/02/2017 00:00', '21/02/2017 01:30', '21/02/2017 03:00', '21/02/2017 04:30', 
    '21/02/2017 06:00', '21/02/2017 07:30', '21/02/2017 09:00', '21/02/2017 10:30', 
    '21/02/2017 12:00', '21/02/2017 13:30', '21/02/2017 15:00', '21/02/2017 16:30', 
    '21/02/2017 18:00', '21/02/2017 19:30', '21/02/2017 21:00', '21/02/2017 22:30', 
    '21/02/2017 00:00' 
]; 
var timeseries = []; 
var dateprefix = dataStore[0][0].substring(0, 11); 

timeindices.forEach(function (d) { 
    timeseries.push(dateprefix + d.substring(11, 16)); 
});

然後我修改了圖的構造是這樣的：

axis: { 
    x: { 
     show: true, 
     type: 'timeseries', 
     tick: { 
      format: '%H:%M', 
      values: timeseries

來源

2017-03-06 16:48:11

爲什麼此C3.JS圖表不顯示X軸上的時間序列？

回答

相關問題