nvd3 und angular - Achsenwerte können nicht korrigiert werden

Question

Ich versuche, eine Multi-Chart mit angular-nvd3 zu entwickeln.

Das Diagramm funktioniert gut, ich kann Daten abrufen und die Werte anzeigen, die ich brauche. Das Problem, das ich jetzt habe, ist, dass ich auf dem x-axis einige spezifische Werte anzeigen möchte, aber ich kann nicht aus irgendeinem Grund.

hier ist, was ich so weit gekommen: http://codepen.io/NickHG/pen/rLWNea?editors=1010

Die Diagrammoptionen sind die folgenden:

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 
    } 
} 

Was zu erreichen, ich versuche, mit jeder Stunde von 00:00 to 23:00 eine X-Achse ist (Ich habe das auch schon mal ausprobiert: how to use d3.time.scale to create label for each hour of day and each day of week)

Die Idee für die x-Achse ist, dass ich Stunden, Tage oder Wochen anzeigen kann, aber ich denke, dass ich erst einmal richtig verstanden habe, wie man Stunden anzeigt, Ich sho Vielleicht kann ich selbst herausfinden, wie man Werte in einem anderen Format druckt.

Vielen Dank für jede Hilfe

Answer 1

Sie fast alle da der Weg waren. Alles, was Sie in Ihrem Stift ändern müssen, ist die Anzahl der Zecken auf der x-Achse von 6 bis 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")); 

Updated pen See. Prost!