2016-12-19 5 views
0

Я создал линейную диаграмму для отображения последних трехмесячных данных. Он отлично работает, за исключением того, что он показывает только две даты/месяца по оси x (первая и последняя). Метка для средней точки не отображается.Показывать месяцы в диаграмме nvd3 оси x - 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; 

данных

[{ 'у': 7L, 'х': u'2016-10 '}, {' у ': 2L, 'х': u'2016-11 '}, {' у ': 6L, 'х': u'2016-12'}]

изображение

enter image description here

+0

Вы пробовали 'xAxis.ticks (d3.time.months)'? – JulCh

+1

Я думаю, это из-за доступного пространства. Можете ли вы увеличить ширину диаграммы и проверить? 'Nv.models.lineChart(). Ширина (420)' – sandyJoshi

ответ

0

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

Вам нужно установить tickValues ​​для вашей оси или d3 будет генерировать их для вас. Посмотрите на ниже фрагменте кода:

 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 является массивом. Для получения дополнительной информации проверьте приведенную выше документацию.

Смежные вопросы