如何使用sql查询绘制动态图表在NV D3？ [英] How to Use sql queries to draw dynamic chart in NV D3?
问题描述
下面的水平条形图的代码工作得很好，但现在我需要从sql数据库检索数据，因此图表应该动态变化，所以我可以在这个代码插入sql查询和什么格式请帮助我。 / p>
The below code for horizontal bar chart works well but now i need to retrieve data from sql database accordingly the chart should change dynamically, so where could i insert sql queries in this code and what is the format please help me guys.
<!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
Here is my 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}]}
推荐答案
done将返回到nvd3下载的zip文件中包含的原始示例文件。
从 multiBarHorizontalChart.html 文件开始，它是examples文件夹。我可以编辑该文件，使其看起来像这样;
OK, what I have done is gone back to the original example file that is included in the nvd3 downloaded zip file.
Starting with the multiBarHorizontalChart.html file that is the examples folder. I was able to edit that file so that it looked like this;
<!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 '，function（data）{行中将加载您的JSON文件，称为data.json。
You should be able to note the d3.json('data.json', function(data) { line in there which will load your JSON file which is called 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}
]
}
]
这可能是你在那里你会发现问题，你会看到有一个额外的方括号 [] 在数据外面如果你有一个看
It is possible that this is where you were striking problems as you will see that there is an extra set of square brackets [] outside the data. If you have a look at the sample data that was included with the example, they are in there too (otherwise I wouldn't have known either).
希望这会更进一步。
现在，您将了解如何使用php脚本查询数据库，以正确格式的JSON返回数据，然后从最初调用数据的位置调用该脚本.json文件。
You will want to now check out how to use a php script to query your database, return the data in correctly formatted JSON and then call that script from the point where you initially called the data.json file.
祝你好运。
这篇关于如何使用sql查询绘制动态图表在NV D3？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
