为什么此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轴上的时间序列？

回答

相关问题