2016-06-29 7 views
0

angular-nvd3を使用してマルチチャートを作成しようとしています。nvd3とangular - 軸の値を固定できません

グラフは正常に動作し、データを取得して必要な値を表示できます。私が今問題にしているのは、x-axisにいくつかの具体的な値を表示したいのですが、何らかの理由でそれを表示できません。 http://codepen.io/NickHG/pen/rLWNea?editors=1010

チャートオプションは次のとおりです:ここ

は、私がこれまで持っているものだ、私が達成しようとしている

chart: { 
    type: 'multiChart', 
    height: 450, 
    margin: { 
     top: 10, 
     right: 40, 
     bottom: 60, 
     left: 30 
     }, 
    useInteractiveGuideline: false, 
    transitionDuration: 10, 
    style: 'expand', 
    tooltip: { 
     keyFormatter: function(d, i) { 
     return "Test"; 
     } 
    }, 
    zoom: { 
     enabled: true 
    }, 
    xScale: x_scale, 
    xAxis: { 
    ticks: 14, 
    domain: [0, 14], 
    axisLabel: '', 
    tickFormat: function(d) { 
     return d3.time.format('%H:%M')(new Date(d * 1000)); 
     } 
    }, 
    Axis1: { 
     axisLabel: '', 
     axisLabelDistance: -100 
    } 
} 

何、00:00 to 23:00から各時間でのX軸(あります私もこれを試しましたが運がありません:

x軸のアイデアは、時間、日、週を表示できるはずですが、時間を表示する方法を正しく理解すれば、私は笑うおそらくuldは異なるフォーマットで値を出力する方法を自分自身で理解することができます。

ありがとうございました

+1

あなたがする必要があるのは24ティックに変更され... 'chart.xAxis .scale(xAxisScale()) .ticks(24) .tickFormat(d3.time.format("%H :%M "));'。 [編集されたペン](http://codepen.io/anon/pen/QEggBa?editors=1010)を参照してください。 –

+0

これを答えにしたい場合は選択できます – Nick

答えて

0

ほとんどすべての方法がありました。あなたはペンで修正する必要があるのは6から24までのx軸上の目盛りの数です....

nv.addGraph(function() {   
     chart = nv.models.multiChart()  
     chart.margin({"left":5,"right":5,"top":10,"bottom":20}) 
     chart.showLegend = true 
     chart.xAxis 
      .scale(xAxisScale()) 
      .ticks(24) //--> changed from .ticks(6) 
      .tickFormat(d3.time.format("%H:%M")); 

Updated penを参照してください。乾杯!あなたのペンで

関連する問題