2016-08-01 37 views
5

C3グラフが重複しています。x軸のラベルは日付形式です。私はこのクエリをGoogleで検索しているだけで、日付、時間のカップルではなく、その後の重複、x軸にその結果が完全に示す示しC3 enter image description hereC3グラフがx軸ラベルと重複しています

var data = { 
    x: 'x', 
    xFormat:'%Y-%m-%d/%H:%M', 
    empty: { 
     label: { 
      text: "No Data" 
     } 
    }, 
    columns: [ 
     ['x', '{$dateArray}'], 
     ['Attack', {$data}], 
    ],colors: { 
     Attack: '#67b7dc', 
    }, 
    types: { 
     Attack: 'area' 
    }}; 
var chart = c3.generate({bindto: '#chart1', 
size: { 
    height: 630, 
}, 
data: data, 
grid: { 
    x: { 
     show: true 
    }, 
    y: { 
     show: true 
    } 
}, 
tooltip: { 
    format: { 
     value: function (value, ratio, id) { 
      var format = value+' Gbps [ IP: '+destIp[value]+' ]'; 
      return format;    
     } 
    } 
}, 
zoom: { 
    enabled: true 
}, 
subchart: { 
    show: true 
},axis: { 
    x: { 
     type: 'timeseries', 
     tick: { 
      format: '%b %d, %H:%M', 
      rotate: 90, 
      multiline: false 
     } 
    }, 
    y: { 
     tick: { 
      format: function (d) { 
       return d.toFixed(3); 
      } 
     }, 
     label: { 
      text: 'Attack Size (Gbps)', 
      position: 'outer-middle' 
     } 
    } 
} 
}); 

答えて

2

使用c3.jsにラベルを付けることも可能ということit.Isのためのすべてのソリューションを取得できませんでしたchart config tick.countに2,3または4のような整数値を設定します。

c3.js Timeseries Chart exmapleを使用してこの設定を再生します。 tick.countなし

問題: - tick.countの設定で解決 enter image description here

問題: - enter image description here

+0

ありがとう@Chetanは、その問題を解決しました –

関連する問題