2016-12-19 11 views
0

最後の3か月のデータを表示する折れ線グラフを作成しました。 x軸(最初と最後)に2つの日付/月のみを表示する点を除いて、正常に動作します。中点のラベルは表示されません。x軸の月をnvd3のチャートで表示する - odoo?

linechart.js

self.chart = nv.models.lineChart() 
      .margin({left:100,botoom:50,top:0}) 
      .useInteractiveGuideline(true) 
      .transitionDuration(350) 
      .showYAxis(true) 
      .showXAxis(true) 
      .showLegend(false) 
      .width(220) 
      .height(150) 

      self.chart.xAxis 
      .axisLabel('Month') 
      .tickFormat(function(d) { 

       return d3.time.format("%b-%Y")(new Date(d)); }) 

      self.chart.yAxis 
      .axisLabel(myData[0].ylabel) 
      .tickFormat(d3.format(',.1f')); 

      myData = self.data; 

データ

[{ 'Y':7L、 'X':u'2016-10 '}、{' Y」:2L、 'X':u'2016-11 '}、{' Y ':6L、 'X':u'2016-12'}]

イメージ

enter image description here

+0

'xAxis.ticks(d3.time.months)'を試したことがありますか? – JulCh

+1

私はそれが利用可能なスペースのためだと思います。あなたはチャートの幅を広げてチェックできますか? 'nv.models.lineChart()。width(420)' – sandyJoshi

答えて

0

https://github.com/d3/d3-axis/blob/master/README.md#axis_tickValues

あなたはあなたのためにそれらを生成しますあなたの軸またはD3のためtickValuesを設定する必要があります。以下のスニペットをご覧ください。

 chart.xAxis 
      .tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); }) 
      .tickValues(_.map(tick_values, function(d) { return getDate(d); })) 
      .rotateLabels(-30); 

ここで、tick_valuesは配列です。詳細は上記のドキュメントを参照してください。

関連する問題