Question

html / css / js和nvd3的新手，所以这可能是一个菜鸟问题。

我有一个html doc，使用函数drawChart（）绘制的nvd3图表可以正常加载。但是，当我尝试使用jquery并将drawChart（）放入$（document）.ready时，图表不会加载？

为什么会这样？

以下是HTML代码：

<!DOCTYPE html>

<head>
<meta charset="utf-8">
<title>Multi Bar Chart</title>
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>

body {
overflow-y:scroll;
}

text {
font: 12px sans-serif;
}

#chart1 {
height: 500px;
margin: 10px;
min-width: 100px;
min-height: 100px;
}

</style>
</head>

<body>

<div>
<h1 style="text-align: center;">Title</h1>
</div>


<div id="chart1" class='with-3d-shadow with-transitions'>

  <form class="form-inline" style="text-align: center;">
<div class="btn-group">
  <button class="btn dropdown-toggle" data-toggle="dropdown">dropdown<span class="caret"></span></button>
</div>
   </form>

  <svg></svg>
 </div>

 <script src="../lib/d3.v3.js"></script>
 <script src="../nv.d3.js"></script>
 <script src="../src/tooltip.js"></script>
 <script src="../src/utils.js"></script>
 <script src="../src/models/legend.js"></script>
 <script src="../src/models/axis.js"></script>
 <script src="../src/models/multiBar.js"></script>
 <script src="../src/models/multiBarChart.js"></script>
 <script src="stream_layers.js"></script>
 <script src="multiBarChart3.js"></script>
 <script src="../src/jquery-2.1.1.js"></script>

 </body>
 </html>

这是javascript：

  function drawChart(){

  var test_data = stream_layers(3,128,.1).map(function(data, i) {
  return {
  key: 'Stream' + i,
  values: data
  };
  });



  nv.addGraph(function() {
var chart = nv.models.multiBarChart()
    .margin({bottom: 100})
    .transitionDuration(300)
    .delay(0)
    .rotateLabels(0)
    .groupSpacing(0.1)
    ;

   chart.multibar
.hideable(true);

    chart.xAxis
    .axisLabel("X")
    .tickFormat(d3.format('d'));

chart.yAxis
    .axisLabel("Y")
    .tickFormat(d3.format(',.1f'));

chart.stacked(true);

d3.select('#chart1 svg')
    .datum(test_data)
.call(chart);

nv.utils.windowResize(chart.update);

chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });

return chart;
});
};


 //$(function(){
 drawChart();
 //});

jquery与nvd3图表绘图

0 个答案: