[英]How do i grab values from this php file?
我最近進入了d3 javascript庫。
我制作了一個散點圖,可以從數組中獲取隨機值
這是代碼
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<script type="text/javascript" src="d3.v3.js"></script>
<style>
.axis path,
.axis line
{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text
{
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<script type="text/javascript">
//Width and height
var w = 500;
var h = 300;
//fix padding issues
var padding = 30;
//var dataset = [
// [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
// [410, 12], [475, 44], [25, 67], [85, 21], [220, 88], [600, 150], [77, 69], [290, 68]
// ];
var dataset = [];
var numDataPoints = 50;
var xRange = Math.random() * 1000;
var yRange = Math.random() * 1000;
for (var i = 0; i < numDataPoints; i++) {
var newNumber1 = Math.round(Math.random() * xRange);
var newNumber2 = Math.round(Math.random() * yRange);
dataset.push([newNumber1, newNumber2]);
}
//Create scale functions
var rScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([2, 5]);
var xScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[0]; })])
.range([padding, w - padding * 2]);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) { return d[1]; })])
.range([h - padding, padding]);
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//create circles
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return xScale(d[0]); //use scale function
})
.attr("cy", function(d) {
return yScale(d[1]); //use scale function
})
.attr("r", function(d) {
return rScale(d[1]);
});
//create svg text
//svg.selectAll("text")
// .data(dataset)
// .enter()
// .append("text")
// .text(function(d) {
// return d[0] + "," + d[1];
// })
// .attr("x", function(d) {
// return xScale(d[0]);
// })
// .attr("y", function(d) {
// return yScale(d[1]);
// })
// .attr("font-family", "sans-serif")
// .attr("font-size", "11px")
// .attr("fill", "red");
//create axis
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
//place axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
//define y axis
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
//place y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
</script>
</body>
如您所見,它繪制了隨機創建並放置到數組中的值的圖形。 很好,但是我想做一個小的更改。 我想創建一個生成隨機數的php文件,並將其繪制出來。
php文件很簡單
<?php
echo rand(1, 50);
?>
那我怎么辦
1.獲取php文件以生成20個隨機數
2.實際上將這些數字放入散點圖數組。
謝謝!
這段PHP代碼可以解決問題:
<?php
$i=20;
while($i > 0) {
echo rand(1, 50);
$i--;
}
?>
要在PHP中生成隨機數,請將項目推入數組,然后回顯:
$count = 0;
while($count < 20) {
$numbers[$count] = rand(1, 50);
$count++;
}
echo json_encode($numbers);
這應該產生類似以下內容:
[35,5,46,25,22,47,23,27,15,17,30,27,17,36,24,40,10,30,14,20]
使用JavaScript和AJAX,獲取PHP頁面並使用JSON.parse
解析
獲取PHP頁面並進行解析(使用jQuery):
var random = [];
$.get("random.php",function(data) {
random = JSON.parse(data);
}
注意:對於PHP腳本,您也可以使用array_push
,但是我使用上面的方法只是因為我們已經有一個while
循環。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.