我对这个网站相对较新，正在为我正在做的当前项目寻求帮助，即显示两个折线图出现在 Y 轴上，具有恒定的 x 轴。对于 php，我的代码看起来像这样：
<?php
header('Content-Type: application/json');
$lala = 'gender_male';
$lele = 'gender_female';
$con = mysqli_connect("127.0.0.1","root","imnoob","csv_db");
// Check connection
if (mysqli_connect_errno($con))
{
echo "Failed to connect to DataBase: " . mysqli_connect_error();
}else
{
$data_points = array();
$data_points1 = array();
$result = mysqli_query($con, "SELECT * FROM centurysq2012");
while($row = mysqli_fetch_array($result))
{
$point = array("x" => $row['weekid'] , "y" => $row[$lala]);
$point1 = array("x" => $row['weekid'], "y" => $row[$lele]);
array_push($data_points, $point);
array_push($data_points1, $point1);
}
echo json_encode($data_points, JSON_NUMERIC_CHECK);
echo json_encode($data_points1, JSON_NUMERIC_CHECK);
}
mysqli_close($con);
?>
这将放入我的HTML文件代码中，如下所示：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<script src="jquery.js"></script>
<script src="canvasjs.js"></script>
<script type="text/javascript">
$(document).onload(function () {
$.getJSON("doubleline.php", function (point, point1) {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title: {
text: "Footfall by Gender"
},
animationEnabled: true,
axisX: {
valueFormatString: ""
//intervalType: "month"
},
toolTip: {
shared: true
},
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Male",
markerType: "square",
color: "#F08080",
dataPoints: point
},
{
type: "line",
showInLegend: true,
name: "Female",
color: "#20B2AA",
lineThickness: 2,
dataPoints: point1
}],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
});
</script>
</head>
<body>
<div id="chartContainer" style="width:400px; height:100%;"></div>
</body>
</html>
Sorry for my codes being messy or the question being a lousy one as i'm still currently a student. Thank you for all your help in advance!
$.getJson 方法只会将你的 PHP 输出结果作为变量返回，你不能把它赋值到 point1， point2 中。因此，对于您的 PHP 编码，您可能需要进行以下修改：
$result = array（$data_points，$data_points1）;回声json_encode（$result，JSON_NUMERIC_CHECK）;
而不是回声json_encode（$data_points， JSON_NUMERIC_CHECK）; echo json_encode（$data_points1， JSON_NUMERIC_CHECK）;
为了显示两行，您需要在数据>中制作 2 组数据，例如：data：[{SET1}， {SET2}]，您可以参考下面的 HTML 代码，这将在图表上显示 2 行：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Earthquakes - per month"
},
axisX: {
valueFormatString: "MMM",
interval:1,
intervalType: "month"
},
axisY:{
includeZero: false
},
data: [
{
type: "line",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 450 },
{ x: new Date(2012, 01, 1), y: 414},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 460 },
{ x: new Date(2012, 04, 1), y: 450 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 480 },
{ x: new Date(2012, 07, 1), y: 480 },
{ x: new Date(2012, 08, 1), y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 500 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
},
{
type: "line",
dataPoints: [
{ x: new Date(2012, 00, 1), y: 420 },
{ x: new Date(2012, 01, 1), y: 404},
{ x: new Date(2012, 02, 1), y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle"},
{ x: new Date(2012, 03, 1), y: 400 },
{ x: new Date(2012, 04, 1), y: 400 },
{ x: new Date(2012, 05, 1), y: 500 },
{ x: new Date(2012, 06, 1), y: 450 },
{ x: new Date(2012, 07, 1), y: 490 },
{ x: new Date(2012, 08, 1), y: 415 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross"},
{ x: new Date(2012, 09, 1), y: 490 },
{ x: new Date(2012, 10, 1), y: 480 },
{ x: new Date(2012, 11, 1), y: 510 }
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script></head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>您的图表将如下所示：2 折线图
对于您的情况，可能是这样的：
$(document).onload(function () {
$.getJSON("doubleline.php", function (result) {
var point1 = result[0];
var point2 = result[1];
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
title: {
text: "Footfall by Gender"
},
animationEnabled: true,
axisX: {
valueFormatString: ""
//intervalType: "month"
},
toolTip: {
shared: true
},
axisY: {
gridColor: "Silver",
tickColor: "silver"
},
data: [
{
type: "line",
showInLegend: true,
lineThickness: 2,
name: "Male",
markerType: "square",
color: "#F08080",
dataPoints: point
},
{
type: "line",
showInLegend: true,
name: "Female",
color: "#20B2AA",
lineThickness: 2,
dataPoints: point1
}],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
});