我对网站相对较新,并且正在寻求当前项目的帮助,这是为了显示y轴上出现两个线图,并且x轴保持不变。对于php,我的代码看起来像这样:
<!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!
将被放入我的html文件代码中,如下所示:
This problem can be solved by creating an empty "migration script file with new version".
This can be simply done by following :
1. Create your new Sugar record class.
2. In Android manifest file just increase the DB version.
3. Add an empty migration script file named after the new DB version, placed under assets/sugar_upgrades. (example. 2.sql).
By doing this, it creates the new table without dropping/creating my old tables.
答案 0 :(得分:0)
$ .getJson方法只会将您的PHP输出结果作为变量返回,您不能将其分配到point1,point2。因此,对于PHP编码,您可能需要进行以下修改:
$ result = array($ data_points,$ data_points1); echo json_encode($ result,JSON_NUMERIC_CHECK);
而不是echo json_encode($ data_points,JSON_NUMERIC_CHECK); echo json_encode($ data_points1,JSON_NUMERIC_CHECK);
为了显示两行,您需要在数据中制作两组数据 - &gt;例如:数据:[{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>
&#13;
您的图表将如下所示: 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();
});
});
&#13;