2017-03-15 5 views
0

私は直接チャートに表示し、X軸との間のいくつかの範囲がnvd3 Mutibarチャートのカスタマイズ変更Xに、Yキー名

var data =[ 
{"key":"Data 0","values":[{ x: "1996-05-22" , y: 1 },{ x: "1997-06-23" , y: 5 }]} 


nv.addGraph(function() { 
    var chart = nv.models.multiBarChart(); 

    chart.multibar.stacked(false); 
    chart.showControls(true); 
    chart.showLegend(true); 
    chart.reduceXTicks(false); 
    //chart.xAxis  .tickFormat(function(d) { return d3.time.format("%Y-%m-%d").parse(d) }); 
    chart.xAxis.rotateLabels(-90); 


    d3.select('#chart svg') 
     .datum(data) 
     .transition().duration(500).call(chart); 

    nv.utils.windowResize(chart.update); 
    console.log(JSON.stringify(data)); 

    return chart; 
}); 
日付を作るために私のJSONデータを使用できるように、私はデータでXとYキー名を変更できます

私のサンプルチャート:http://jsfiddle.net/gxc27jav/29/

マイ要件

  1. 1:変更X「日付」とYデータのカウントなどと チャートでそれを使用することができますするための鍵
  2. 2:ティック値の範囲をリアルタイムの日付にします。現在のところ、 のデータはすべてDATAに表示されます。 chart.reduceXTicks(true); は範囲を均一にしません。
+0

はD3 JSとnvd3の最新バージョンを使用してくださいました。例はhttp://nvd3-community.github.io/nvd3/examples/site.htmlにあります。 ドキュメントhttp://nvd3-community.github.io/nvd3/examples/documentation.html#discreteBarChart – bgth

答えて

0

私は両方の質問への答え

nv.addGraph(function() { 
      var chart = nv.models.multiBarChart() 
       .x(function (d) { 
        return d.Date // to show Date propery on X axis 
       }) 
       .y(function (d) { 
        return d.y 
       }); 

      chart.multibar.stacked(false); 
      chart.showControls(false); 
      chart.showLegend(true); 
      chart.reduceXTicks(false); 
      chart.yAxis 
       .tickFormat(d3.format('d')); 

      chart.margin({ 
       bottom: 70 
      }); 




      d3.select('#chart svg') 
       .datum(data) 
       .transition().duration(500).call(chart); 

      var xTicks = d3.select('.nv-x.nv-axis > g').selectAll('g'); 
      xTicks 
       .selectAll('text') 
       .attr('transform', function (d, i, j) { 
        return 'translate (-10, 35) rotate(-90 0,0)' 
       }); //to adjsut the rotated axis Margins 

      nv.utils.windowResize(chart.update); 
      // console.log(JSON.stringify(data)); 

      return chart; 
     } 
関連する問題