我是该网站的新手，正在寻求当前项目的帮助，这是要在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）;
回声json_encode（$ data_points1，JSON_NUMERIC_CHECK）;
为了显示两行，您需要在data->内部制作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 lines chart
对于您的情况，也许是这样的：
$(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();
});
});关于php - 如何使用我自己的phpMyadmin数据库使两个Y轴图一起出现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35079421/