Question

在我的工作中，我尝试使用nvd3打印一些图形。但我只能在我的页面上显示1个图表，我不明白为什么上一个图表没有出现。你能给我一些提示吗？

<!DOCTYPE html>
<meta charset="utf-8">
 
<head>
<link href="lib/css/nv.d3.css" rel="stylesheet">
</head>
<style>
 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}
 
/**********
*  Legend
*/
 
.nvd3 .nv-legend .nv-series {
  cursor: pointer;
}
 
.nvd3 .nv-legend .nv-disabled circle {
  fill-opacity: 0;
}
 
 
text {
  font: 10px sans-serif;
}
 
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
 
form {
  position: absolute;
  right: 10px;
  top: 10px;
}
#chart, #pid svg {
  height: 600px;
  width: 600px;
}
</style>
<div id="pid">
  <svg></svg>
</div>
<div id="chart">
  <svg></svg>
</div>
 
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="lib/js/nv.d3.js"></script>
 
<script>
var divs = ["pid", "chart"];
divs["pid"]= {id:"#pid svg", datam:[
      {
        values:[
          {x:"M",y:1},
          {x:"T",y:2},
          {x:"W",y:3},
          {x:"R",y:3},
          {x:"F",y:4},
          {x:"S",y:5},
          {x:"U",y:6}
        ],
        key:"Apples"
      },
      {
        values:[
          {x:"M",y:5},
          {x:"T",y:2},
          {x:"W",y:6},
          {x:"R",y:8},
          {x:"F",y:2},
          {x:"S",y:4},
          {x:"U",y:1}
        ],
        key:"Zebras"
      },
            {
        values:[
          {x:"M",y:4},
          {x:"T",y:6},
          {x:"W",y:5},
          {x:"R",y:7},
          {x:"F",y:7},
          {x:"S",y:2},
          {x:"U",y:5}
        ],
        key:"Bananas"
      }
    ], color:['purple', 'black', 'yellow']};
divs["chart"]= {id:"#chart svg", datam:[
      {
        values:[
          {x:"M",y:1},
          {x:"T",y:2},
          {x:"W",y:3},
          {x:"R",y:3},
          {x:"F",y:4},
          {x:"S",y:5},
          {x:"U",y:6}
        ],
        key:"Apples"
      },
      {
        values:[
          {x:"M",y:5},
          {x:"T",y:2},
          {x:"W",y:6},
          {x:"R",y:8},
          {x:"F",y:2},
          {x:"S",y:4},
          {x:"U",y:1}
        ],
        key:"Zebras"
      }
    ], color:['red', 'blue', 'green']};
 
console.log(divs)
 
var i=0;
  var chart = new Array(2);
nv.render = function render(step) {
    // number of graphs to generate in each timeout loop
    step = step || 1;

    nv.render.active = true;
    nv.dispatch.render_start();

    setTimeout(function() {
        var chart, graph;

        for (var i = 0; i < step && (graph = nv.render.queue[i]); i++) {
            chart = graph.generate();
            if (typeof graph.callback == typeof(Function)) graph.callback(chart);
            nv.graphs.push(chart);
        }

        nv.render.queue.splice(0, i);

        if (nv.render.queue.length) setTimeout(arguments.callee, 0);
        else {
            nv.dispatch.render_end();
            nv.render.active = false;
        }
    }, 0);
};

nv.render.active = false;
nv.render.queue = [];

for (var key in divs) {
  console.log(i);
nv.addGraph(function(obj) {

   if (typeof arguments[0] === typeof(Function)) {
        obj = {generate: arguments[0], callback: arguments[1]};
    }

    nv.render.queue.push(obj);
    console.log(nv.render.queue.length);
    if (!nv.render.active) {
    nv.render();
    }

    chart[i] = nv.models.multiBarChart().showControls(true).groupSpacing(0.5).color(divs[key]['color']);
    chart[i].yAxis
        .tickFormat(d3.format(',.1f'));
    d3.select(divs[key]['id'])
        .datum(divs[key]['datam'])
      .transition().duration(500).call(chart[i]);
 
    nv.utils.windowResize(chart[i].update);
 
    return chart[i];
});
i++;
};
// render function is used to queue up chart rendering
// in non-blocking timeout functions

</script>

我希望你帮助我，谢谢。

nvd3显示2图表

0 个答案: