2017-06-22 57 views
0

我正在使用庫c3js來顯示面積圖。 我的日期數據存在問題。我有很多日期(+/- 1000),我想正確分組我的日期。C3JS - 組日期正確

這裏是我的actuel渲染: [1]

你可以看到,一些日期顯示兩個時間X軸。

這裏是我的圖表的代碼:

var usedList = JSON.parse(usedList); 
     var format = informations[0]; 
     var counts = informations[1]; 

     var amounts = new Array('Evolution'); 
     var dates = new Array("x"); 

     for (var i = 0; i < usedList.length; i++) 
     { 
      amounts.push(usedList[i].price); 
      dates.push(usedList[i].date); 
     } 

var chart = c3.generate({ 
      bindto : '#js-chart', 
      size : { 
       height : 220 
      }, 
      area: { 
        zerobased: false 
       }, 
      data : { 
       selection : { 
        draggable : false 
       }, 
       x : 'x', 
       columns : [ dates, amounts ], 
       types : { 
        Evolution : 'area' 
       }, 
       colors : { 
        Evolution : '#143FB4' 
       } 
      }, 
      axis : { 
       x : { 
        type : 'timeseries', 
        tick : { 
         fit: true, 
         format : format 
        }, 
        padding: { 
         left: 0, 
         right: 0, 
        } 
       } 
      }, 
      point : { 
       r : 0 
      }, 
      grid : { 
       y : { 
        show : true 
       } 
      } 

     }); 

你怎麼認爲我可以做重新集結日期,以便有每個月的只是一個重複?

謝謝 大衛

回答

1

如果什麼推只有一個日期一個月?

for (var i = 0; i < usedList.length; i++) 
    { 
     amounts.push(usedList[i].price); 

     // replacing existing dates with empty string, keeping array size 
     var d = usedList[i].date; 
     dates.push(dates.indexOf(d) == -1 ? d : ''); 
    } 

如果日期存儲爲'MM/YYYY',這應該有效。 如果日期以不同的格式存儲,則需要進行不同的檢查。 但一般想法保持不變 - 只有一個月的X軸的日期。

+0

謝謝你,我調整了你的想法,以配合我的完整邏輯,它似乎工作。 –

+0

我很高興幫助! –

+0

檢查後,如果我使用你的方法,所有對應於''(空字符串)的值都不會出現在圖表中,因爲沒有日期關聯。 –