javascript - Php / Html - 如何绘制数组图?
问题描述
我发现了一个数组的均值、众数、中值和标准差。现在我想在图表中显示它们。我想画一个数组的折线图,并指出平均值、众数、中位数和标准差。我在 x 和 y 轴下方尝试了一些东西,上面没有出现数字,我对 php 有点陌生。我需要帮助才能让我的数组变成折线图。有没有人可以帮助我?谢谢你。
我的代码:
<?php
echo "Welcome to my project".'<br>'.'<br>';
$arr=array(1100,3150,4430,4430,5170,7450,7450,7450,8230);
for($i=0; $i<=8; $i++)
{
if ($arr[$i]<100) {
$arr[$i]=$arr[$i];
}
else
{
$arr[$i]=$arr[$i]/1000;
$arr[$i]=(string)$arr[$i];
}
}
function calculate($arr, $output){
switch($output){
case 'mean':
$count = count($arr)+1;
$sum = array_sum($arr);
$total = $sum / $count;
break;
case 'median':
rsort($arr);
$middle = (count($arr) / 2)+1;
$total = $arr[$middle-1];
break;
case 'mode':
$v = array_count_values($arr);
arsort($v);
foreach($v as $k => $v){$total = $k; break;}
break;
}
return $total;
}
function sd_square($x, $total) { return pow($x - $total,2); }
function sd($arr) {
return sqrt(array_sum(array_map("sd_square", $arr, array_fill(0,count($arr), (array_sum($arr) / count($arr)) ) ) ) / (count($arr)-1) );
}
echo ' '.'<br>';
echo "Values: ";
echo json_encode($arr).'<br>';
echo 'Mean: '.calculate($arr, 'mean').'<br>';
echo 'Median: '.calculate($arr, 'median').'<br>';
echo 'Mode: '.calculate($arr, 'mode').'<br>';
echo "Standart Derivation: ".sd($arr);
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Analysis"
},
axisY: {
title: "Variables"
},
data: [{
type: "line",
arr: <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>
}]
});
chart.render();
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 250px; width: 50%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>
解决方案
首先,将您的数组数据转换为 x / y 坐标...
var data = <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>;
data = data.map(function (row, index) {
return {
x: index,
y: row
};
});
然后添加到dataPoints
键中data
data: [{
type: "line",
dataPoints: data // <-- add x / y coordinates here
}]
例如
window.onload = function () {
var data = <?php echo json_encode($arr, JSON_NUMERIC_CHECK); ?>;
data = data.map(function (row, index) {
return {
x: index,
y: row
};
});
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Analysis"
},
axisY: {
title: "Variables"
},
data: [{
type: "line",
dataPoints: data
}]
});
chart.render();
}
看到这个 php 小提琴...