如何中心ndv3 lineChart

我是一个HTML和javascript的总noob所以请原谅我的无知。我想创建一个nvd3图表。我将数据传递给ndv3并生成图表html文件。如何将图表对齐到中心而不是左侧，以及如何将图例对齐到右侧。这里的文件内容：如何中心ndv3 lineChart

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8" /> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" /> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script> 
</head> 

<body> 

    <div id="linechart_with_interactive_guideline"> 
     <svg style="width:600px;height:400px;"></svg> 
    </div> 

    <script> 
     data_linechart_with_interactive_guideline = [{ 
      "values": [{ 
       "y": 2688202.88, 
       "x": 1492297200000.0 
      }, { 
       "y": 7597414.21, 
       "x": 1492383600000.0 
      }, { 
       "y": 2881684.29, 
       "x": 1492470000000.0 
      }, { 
       "y": 5068672.55, 
       "x": 1492556400000.0 
      }, { 
       "y": 3707031.11, 
       "x": 1492642800000.0 
      }, { 
       "y": 4088938.01, 
       "x": 1492729200000.0 
      }], 
      "key": "traffic", 
      "yAxis": "1" 
     }]; 

     nv.addGraph(function() { 
      var chart = nv.models.lineChart().useInteractiveGuideline(true); 

      chart.margin({ 
       top: 60, 
       right: 60, 
       bottom: 20, 
       left: 80 
      }); 

      var datum = data_linechart_with_interactive_guideline; 

      chart.xAxis 
       .tickFormat(function(d) { 
        return d3.time.format.utc('%d %b %Y')(new Date(parseInt(d))) 
       }); 
      chart.yAxis 
       .tickFormat(d3.format(',r')); 

      chart.showLegend(true); 

      d3.select('#linechart_with_interactive_guideline svg') 
       .datum(datum) 
       .transition().duration(500) 
       .attr('width', 600) 
       .attr('height', 400) 
       .call(chart); 

     }); 
    </script> 

</body> 

</html>

来源

2017-05-03 DougKruger

我希望我能正确理解你的问题。我相信你希望你的图表成为浏览器的显示中心？如果这就是你想要的。像这样编辑您的代码

 <center> 
     <svg style="width:600px;height:400px;"></svg> 
     </center>

这是使用html最简单的方法。

来源

2017-05-04 13:48:39 mtkilic

如何中心ndv3 lineChart

回答

相关问题