我用谷歌搜索了一下，并在论坛上检查了答案，但我找不到一个。
我的问题是，我想使用chartsnews .js结合php和数据集应该可用于js超过json，但我得到一个未定义的数据集异常或图表没有竞争。
我可以将php数组与我从github项目chartsnews .js示例中获取的数据进行转换。当我比较这两个字符串时。它们几乎是相同的，但关键词是在引号下。我试着把这个字符串复制到html文件中，图表工作了。
但是当我使用Javascript解析字符串时，它告诉我数据集是未定义的，或者它显示没有竞争的图表。
我将变量设置为对象，并将数据集设置为对象，但这并没有解决问题。
我发现，mydata1没有数据，当我想访问它在最后。如何使var解析正常工作?
PHP代码: $data = array(
'labels' => array("Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"),
'datasets' => array(
array(
'fillColor' => "blue",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'data' => array(100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000),
'title' => "previous Month"
),
array(
'fillColor' => "red",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'data' => array(100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000),
'title' => "current month"
),
array(
'type' => "Line",
// fillColor : "rgba(0,0,0,0)",
'strokeColor' => "green",
'pointColor' => "green",
'pointStrokeColor' => "green",
'data' => array(200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000),
'title' => "total"
)
)
);
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
echo '[' . json_encode($data) . ']';
//echo json_encode($data);
exit("");
…输出:
[{"fillColor":"blue","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[100,200,400,2000,4000,16000,20000,32000,45000,85000,95000,115000],"title":"previous Month"},{"fillColor":"red","strokeColor":"rgba(220,220,220,1)","pointColor":"rgba(220,220,220,1)","pointStrokeColor":"#fff","data":[100,200,1600,2000,12000,4000,12000,13000,40000,10000,20000,17000],"title":"current month"},{"type":"Line","strokeColor":"green","pointColor":"green","pointStrokeColor":"green","data":[200,400,2000,4000,16000,20000,32000,45000,85000,95000,115000,132000],"title":"total"}]
…和HTML代码+原始数据集:
<!DOCTYPE html>
<html>
<body>
<h1>Customers</h1>
<div id="id01"></div>
<script src='ChartNew.js-master/ChartNew.js'></script>
<script>
var original_data = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
fillColor: "blue",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000],
title: "previous Month"
},
{
fillColor: "red",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000],
title: "current month"
},
{
type: "Line",
strokeColor: "green",
pointColor: "green",
pointStrokeColor: "green",
data: [200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000],
title: "total"
}
]
}
var newopts = {
animation: true,
datasetFill: false,
canvasBorders: true,
canvasBordersWidth: 3,
canvasBordersColor: "black",
graphTitle: "Graph Title",
graphTitleFontFamily: "'Arial'",
graphTitleFontSize: 24,
graphTitleFontStyle: "bold",
graphTitleFontColor: "#666",
legend: true,
legendBlockSize: 30,
bezierCurveTension: 0.2,
legendPosX: 2,
legendPosY: 0,
graphMax: 160000,
yAxisMinimumInterval: 40000,
scaleXGridLinesStep: 9999
}
</script>
<div id="canvas_parent_id" >
<canvas id="canvas_stackedbar_id" width="500px" height="500px">Please enable Javascript to see the Chart</canvas>
<script>
var mydata1 = new Object();
mydata1.datasets = new Object();
try {
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost/file.php?json=123";
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
myFunction(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(response) {
var arr = JSON.parse(response);
arr = JSON.stringify(arr);
mydata1 = arr;
}
} catch (e) {
alert("Error: " + e);
}
</script>
</div>
</body>
</html>
完整的代码可以正常工作
HTML:<!DOCTYPE html>
<html>
<head>
<script src='http://fvancop.github.io/ChartNew.js/ChartNew.js'></script>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
</head>
<body>
<canvas id="canvas" height="600" width="1000"></canvas>
<script>
$.ajax({
type: "POST",
url: "http://localhost/file.php?json=123",
async: false,
cache: false,
contentType: false,
processData: false,
dataType: "JSON",
success: function (response)
{
new Chart(document.getElementById("canvas").getContext("2d")).Line(response);
}
});
</script>
</body>
</html>
PHP的一面
$data = array();
$data['labels'] = array("Jan", "Feb", "Mar", "Apr", "May", "June", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
$data['datasets'] = array(
array(
'fillColor' => "blue",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'data' => array(100, 200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000),
'title' => "previous Month"
),
array(
'fillColor' => "red",
'strokeColor' => "rgba(220,220,220,1)",
'pointColor' => "rgba(220,220,220,1)",
'pointStrokeColor' => "#fff",
'data' => array(100, 200, 1600, 2000, 12000, 4000, 12000, 13000, 40000, 10000, 20000, 17000),
'title' => "current month"
),
array(
'type' => "Line",
// fillColor : "rgba(0,0,0,0)",
'strokeColor' => "green",
'pointColor' => "green",
'pointStrokeColor' => "green",
'data' => array(200, 400, 2000, 4000, 16000, 20000, 32000, 45000, 85000, 95000, 115000, 132000),
'title' => "total"
)
);
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json; charset=UTF-8");
echo json_encode($data);
//echo json_encode($data);
exit("");