2017-03-06 25 views
0

このチャートは、通常のレンダリングなかったが、もはや(フィドルの不足のため申し訳ありません)下部に時系列を示していますこの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 } 
     }); 
+0

を。あなたの身長が正しくスケーリングされているかどうか確認できますか? size:{height:height * 2} – Akoya

+0

それは 'axis.x.tick.values'配列でした。私が 'c3current'と 'c3data'を入力するダミーデータではなく、実際のデータを使用するようにコードを更新したら、 'axis.x.tick.values'配列の日付が同期していないので、レンダリングしませんでした。私はそれらを一致させるためにいくつかのコードを書いて、彼らは再び現れた。 –

+0

@akoyaそれはいい考えです。私は実際に先週同じ問題を抱え、それを同じ方法で修正しました。 –

答えて

0

は「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 
関連する問題