我有一个阵列;
$arrgraph={"800":800,"1650":850,"2450":800,"3200":750,"4300":1100,"5250":950,"6200":950,"7150":950,"8000":850}
我从这两个数组中找到了array_combine
的这个数组:
$arr=array(800,850,800,750,950,1100,950,950,850);
$x=array(800,1650,2450,3200,4300,5250,6200,7150,8000);
我想在折线图上显示这个数组。但我不能这样做。
我尝试了这个,但localhost页面上没有出现任何内容。
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var data = <?php echo json_encode($arrgraph, 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"
},
axisX: {
title: "Sample"
},
data: [{
type: "line",
dataPoints: data
}]
});
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>
有人告诉我,我可以使用这个代码并使用'foreach'来制作数据点,但我也做不到,因为我在php上有点新手。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Multi-Series Line Chart"
},
data: [
{
type: "line", //you can echo php array here as dataPoints variable
dataPoints: [
{ x: 10, y: 21 },
{ x: 20, y: 25},
{ x: 30, y: 20 },
{ x: 40, y: 25 },
{ x: 50, y: 27 },
{ x: 60, y: 28 },
{ x: 70, y: 28 },
{ x: 80, y: 24 },
{ x: 90, y: 26}
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
有什么方法可以制作这张图表吗?我的错误是什么,我该怎么办?谢谢。
您可以循环一个数组并使用该键从另一个数组中获取该项。
我创建了一个新的数组,其中包含您需要作为输出的字符串格式的所有数据点,但我省略了尾随的逗号。 循环完成后,我用逗号和换行来破坏输出数组。
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Multi-Series Line Chart"
},
data: [
{
type: "line", //you can echo php array here as dataPoints variable
dataPoints: [
<?PHP
foreach($arr as $key => $v){
$output[] = "{ x: " . $x[$key] . ", y: " . $v . " }";
}
echo implode(",\n", $output);
?>
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>