我创建了一个折线图，它使用 php 和 json 加载数据。
问题是图表将 NULL 值绘制为 0，看起来非常难看。
我最好的猜测是我以错误的方式创建 json，而我真正想要的输出是 {"v":} 而不是 {"v":""}。
现在的折线图：
我想要的是：
php代码
$reports['cols'][] = array(label => "Time", type => "string");
$reports['cols'][] = array(label => "Today", type => "number");
$reports['cols'][] = array(label => "Yesterday", type => "number");
$reports['cols'][] = array(label => "Budget", type => "number");
//Some mysql code that populates values ($today, $yesterday, $budget)
$rows = array();
for($i=10; $i <= 21; $i++){
$temp = array();
$temp[] = array('v' => (int) $i);
//Format string will return "" and not "0" if value is blank
$temp[] = array('v' => (string) $today["$i"]);
$temp[] = array('v' => (string) $yesterday["$i"]);
$temp[] = array('v' => (string) $budget);
$rows[]['c'] = $temp;
}
$reports['rows'] = $rows;
$string=json_encode($reports);
echo $string;
php的输出：
{
"cols":[
{"label":"Time","type":"string"},
{"label":"Today","type":"number"},
{"label":"Yesterday","type":"number"},
{"label":"Budget","type":"number"}
],
"rows":[
{"c":[{"v":10},{"v":"0"},{"v":"0"},{"v":"90000"}]},
{"c":[{"v":11},{"v":"22491"},{"v":"7420"},{"v":"90000"}]},
{"c":[{"v":12},{"v":""},{"v":"50082"},{"v":"90000"}]},
{"c":[{"v":13},{"v":""},{"v":"91660"},{"v":"90000"}]},
{"c":[{"v":14},{"v":""},{"v":"109204"},{"v":"90000"}]},
{"c":[{"v":15},{"v":""},{"v":"115280"},{"v":"90000"}]},
{"c":[{"v":16},{"v":""},{"v":"111853"},{"v":"90000"}]},
{"c":[{"v":17},{"v":""},{"v":"87368"},{"v":"90000"}]},
{"c":[{"v":18},{"v":""},{"v":"33063"},{"v":"90000"}]},
{"c":[{"v":19},{"v":""},{"v":"14903"},{"v":"90000"}]},
{"c":[{"v":20},{"v":""},{"v":"1441"},{"v":"90000"}]},
{"c":[{"v":21},{"v":""},{"v":"0"},{"v":"90000"}]}
]
}
Javascript
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: "functions/load.php?q=salesChart",
dataType:"json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Money / Hour',
colors: ['#4BA15A', '#45559D', 'red'],
legend: {position: 'top'},
lineWidth: 2,
pointSize: 3,
fontName: 'Helvetica',
fontSize: 10,
interpolateNulls: false,
backgroundColor: {strokeWidth: 1},
chartArea: {left: 70, top: 60, width: "85%", height: "70%"}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
