Question

下面的水平条形图代码运行良好，但现在我需要从sql数据库中检索数据，因此图表应该动态更改，所以我在哪里可以插入sql查询在这个代码中，格式是什么，请帮助我们。< / p>

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<link href="Scripts/nv.d3.css" rel="stylesheet" type="text/css">
<script src="Scripts/d3.v3.js"></script>
<script src="Scripts/nv.d3.js"></script>
<script src="Scripts/utils.js"></script>
<script src="Scripts/tooltip.js"></script>
<script src="Scripts/models/axis.js"></script>
<script src="Scripts/models/multiBarHorizontal.js"></script>
<script src="Scripts/models/multiBarHorizontalChart.js"></script>
<script src="Scripts/bar.js"></script>

</head>

<body>

<div id="chart" style="height:700px">
<svg>
</svg>
</div>



<script>

d3.json("data.json",function(error,data){
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
  .x(function(d) { return d.label })
  .y(function(d) { return d.value })
  .margin({top: 30, right: 20, bottom: 50, left: 175})
  .showValues(true)
  .tooltips(false)
  .showControls(false);

  chart.yAxis
  .tickFormat(d3.format(',.0f'));

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

 nv.utils.windowResize(chart.update);

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

 return chart;
 });
 });

</script>
</body>
</html>

这是我的data.json

{"values":[
{"label":"Alaska","value":3},
{"label":"Alabama","value":4},
{"label":"Arkansas","value":5},
{"label":"Arizona","value":7},
{"label":"California","value":8},
{"label":"Colorado","value":9},
{"label":"Missouri","value":31}]}

Answer 1

好的，我所做的是回到nvd3下载的zip文件中包含的原始示例文件。从作为示例文件夹的multiBarHorizontalChart.html文件开始。我能够编辑该文件，使其看起来像这样;

<!DOCTYPE html>
<meta charset="utf-8">

<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">

<style>

body {
  overflow-y:scroll;
}

text {
  font: 12px sans-serif;
}

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

#chart1 svg {
  height: 500px;
}

</style>
<body>

  <div id="chart1">
    <svg></svg>
  </div>

<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/multiBarHorizontal.js"></script>
<script src="../src/models/multiBarHorizontalChart.js"></script>
<script src="stream_layers.js"></script>
<script>

d3.json('data.json', function(data) {

var chart;
nv.addGraph(function() {
chart = nv.models.multiBarHorizontalChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .margin({top: 30, right: 20, bottom: 50, left: 175})
      .showValues(true)
      .tooltips(false)
      .barColor(d3.scale.category20().range())
      .showControls(true);

  chart.yAxis
      .tickFormat(d3.format(',.2f'));

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

  nv.utils.windowResize(chart.update);

  return chart;
});
});

</script>

你应该能够注意到那里的d3.json('data.json', function(data) {行，它将加载你的JSON文件，名为data.json。

[
  {"values":
    [
      {"label":"Alaska","value":3},
      {"label":"Alabama","value":4},
      {"label":"Arkansas","value":5},
      {"label":"Arizona","value":7},
      {"label":"California","value":8},
      {"label":"Colorado","value":9},
      {"label":"Missouri","value":31}
    ]
  }
]

这可能是你遇到问题的地方，因为你会发现在数据之外还有一组额外的方括号[]。如果您查看示例中包含的示例数据，它们也在那里（否则我也不知道）。

enter image description here

希望这会让你更进一步。

您现在要查看如何使用php脚本查询数据库，以正确格式化的JSON返回数据，然后从最初调用data.json文件的位置调用该脚本。

祝你好运。

如何使用SQL查询在NV D3中绘制动态图表？

1 个答案: