2016-06-23 3 views
0

Ich habe versucht, zu bauen, aber wenn ich Daten Variable seine Anzeige nichts auf Diagramm div gebenKann ich die Datumszeichenfolge direkt an d3 Balkendiagrammdaten übergeben? stackedBarChart mit d3 js

hier unter meinem Jquery-Code ist:

var stackedBarChartData = [{key:"Facebook","color":"#348fe2",value:[{x:"2016-06-13",y:7},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17",y:2},{x:"2016-06-18",y:0},{x:"2016-06-19",y:1},{x:"2016-06-20" 
      ,y:4},{x:"2016-06-21",y:4},{x:"2016-06-22",y:0},{x:"2016-06-23",y:0}]},{key:"Twitter","color":"#00acac" 
      ,value:[{x:"2016-06-13",y:0},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17" 
      ,y:0},{x:"2016-06-18",y:0},{x:"2016-06-19",y:0},{x:"2016-06-20",y:0},{x:"2016-06-21",y:0},{x:"2016-06-22" 
      ,y:0},{x:"2016-06-23",y:0}]},{key:"Whatsapp","color":"#33bdbd",value:[{x:"2016-06-13",y:0},{x:"2016-06-14" 
      ,y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17",y:0},{x:"2016-06-18",y:0},{x:"2016-06-19" 
      ,y:0},{x:"2016-06-20",y:0},{x:"2016-06-21",y:0},{x:"2016-06-22",y:0},{x:"2016-06-23",y:0}]},{key:"Message" 
      ,"color":"#c47d15",value:[{x:"2016-06-13",y:0},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16" 
      ,y:0},{x:"2016-06-17",y:0},{x:"2016-06-18",y:0},{x:"2016-06-19",y:0},{x:"2016-06-20",y:0},{x:"2016-06-21" 
      ,y:0},{x:"2016-06-22",y:1},{x:"2016-06-23",y:0}]},{key:"Email","color":"#ff5b57",value:[{x:"2016-06-13" 
      ,y:0},{x:"2016-06-14",y:0},{x:"2016-06-15",y:0},{x:"2016-06-16",y:0},{x:"2016-06-17",y:0},{x:"2016-06-18" 
      ,y:0},{x:"2016-06-19",y:0},{x:"2016-06-20",y:1},{x:"2016-06-21",y:3},{x:"2016-06-22",y:1},{x:"2016-06-23" 
      ,y:0}]}]; 

       nv.addGraph({ 
        generate: function() { 
         var stackedBarChart = nv.models.multiBarChart() 
          .stacked(true) 
          .showControls(false); 

         var svg = d3.select('#nv-bar-chart-sharing').append('svg').datum(stackedBarChartData); 
         svg.transition().duration(0).call(stackedBarChart); 
         return stackedBarChart; 
        } 
       }); 



    <div id="nv-bar-chart-sharing" class="height-400"></div> 

Ich habe bereits ein Beispiel für stackedBarChart in Welchen Json-Wert haben alle ganzzahligen Daten in der "Wert" -Taste, aber hier habe ich das Datum für die X-Achse übergeben, also könnte ich das Datum dort übergeben? Wenn nein, dann wie kann ich Datum auf der x-Achse

Antwort

1

für diese Anzeige benötigen Sie nvd3 zu sagen, dass Datum in x erwarten:

var stackedBarChart = nv.models.multiBarChart() 
    .stacked(true) 
    .showControls(false) 
    .x(function (d){ 
    return new Date(d.x);//this will get the date 
}) 

jetzt während Show Anzeigen in diesem Format

stackedBarChart.xAxis 
    .tickFormat(d3.time.format("%Y-%m-%d")); 

Arbeitscode here