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

OK、私が行ったことは、ダウンロードした 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 に答える