2016-06-23 28 views
0

私はD3のJSを使用してstackedBarChartを構築しようとしたが、私はここに、以下のチャートのdiv日付文字列をd3棒グラフデータに直接渡すことはできますか?

上の変数にその表示は何もデータを渡されていない時はいつでも私のjqueryのコードでいます

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> 

私はstackedBarChartのもう一つの例を持っていますどのjson値は "value"キーのすべての整数データを持っていますが、ここではx軸の日付を渡しました。

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

今、この形式で番組を表示しながら

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

:何が、その後どのように私はこのために、x軸

答えて

1

の日付を表示することができた場合は、xで日付を期待nvd3を指示する必要がありません作業コードhere