0

下面的水平条形图代码效果很好，但现在我需要从 sql 数据库中检索数据，因此图表应该动态变化，所以我在哪里可以在这段代码中插入 sql 查询以及格式是什么，请帮助我。

<!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}]}
4

1 回答 1

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) {其中将加载名为 data.json 的 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}
    ]
  }
]

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

在此处输入图像描述

希望那一套能让你走得更远。

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

祝你好运。

于 2013-03-03T09:30:22.727 回答