nvd3 и angular - невозможно исправить значения оси

Я пытаюсь разработать мультидиаграмму, используя angular-nvd3.

Диаграмма работает нормально, я могу получать данные и отображать нужные мне значения. Проблема, с которой я столкнулся сейчас, заключается в том, что я хотел бы отобразить на 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
     }
 }

Чего я пытаюсь добиться, так это оси X с каждым часом от 00:00 to 23:00 (я также пробовал это, но безуспешно: как использовать d3.time.scale для создания метки для каждого часа день и каждый день недели )

Идея для оси x заключается в том, что я должен иметь возможность отображать часы, дни или недели, но я предполагаю, что как только я правильно пойму, как отображать часы, я, вероятно, смогу сам понять, как печатать значения в другом формате. .

Спасибо за любую помощь


angularjs d3.js nvd3.js angular-nvd3
person Nick    schedule 29.06.2016    source источник
comment
в вашей ручке все, что вам нужно сделать, это изменить на 24 тика... chart.xAxis .scale(xAxisScale()) .ticks(24) .tickFormat(d3.time.format("%H:%M"));. см. отредактированное перо.   -  person Bennett Adams    schedule 04.07.2016
comment
Если вы хотите поставить это как ответ, я могу выбрать его   -  person Nick    schedule 05.07.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вы были почти весь путь там. Все, что вам нужно изменить в вашей ручке, это количество делений по оси x от 6 до 24....

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"));

См. обновленное перо. Ваше здоровье!

person Bennett Adams    schedule 05.07.2016