【发布时间】：2016-10-21 16:20:24
【问题描述】：
我已经使用 Google Charts 成功创建了一个包含动态图表的网站。 然后我尝试添加一个滑块，但我失败了。 我得到的错误是“一个或多个参与者无法绘制（）”和“第 0 列不是数字”。
工作网站的脚本是：
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = $.ajax({
url: " ulsuccessperop.php ",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var options = {
'title': 'UL Success per operatore',
'width':1200,
'height':900,
chartArea:{left:80,top:50,width:"70%",height:"80%"}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
不工作的网站的脚本是：
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var jsonData = $.ajax({
url: "ulsuccessperop.php",
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var dataRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Data'
}
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
'title': 'UL Success per operatore',
'width':1200,
'height':900,
chartArea:{left:80,top:50,width:"70%",height:"80%"}
}
});
dashboard.bind(dataRangeSlider, lineChart);
dashboard.draw(data);
}
</script>
数据由 PHP 页面 (ulsuccessperop.php) 提供，该页面返回 JSON 格式的值数组（多列）。 提供给 Dashboard 的数据可能与提供给 Chart 的数据不同，但我在 Google Chart 文档中找不到任何相关内容。
WhiteHat 建议更改后的新代码：
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var jsonData = $.ajax({
url: "data/regperop.php,
dataType: "json",
async: false
}).responseText;
var data = new google.visualization.DataTable(jsonData);
var view = new google.visualization.DataView(data);
view.setColumns([{
calc: function (data, row) {
return new Date(data.getValue(row, 0))
},
type: 'date',
label: 'Data'
}, 1, 2, 3, 4]);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
var dataRangeSlider = new google.visualization.ControlWrapper({
'controlType': 'DateRangeFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'Data'
}
});
google.visualization.events.addListener(dataRangeSlider, 'ready', function () {
var state = dataRangeSlider.getState();
console.log(state.lowValue, state.highValue);
});
var lineChart = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart_div',
'options': {
'title': 'Numero registrazioni per operatore', 'width':1200,
'height':900,
chartArea:{left:80,top:50,width:"70%",height:"80%"}
}
});
dashboard.bind(dataRangeSlider, lineChart);
dashboard.draw(data);
}
JSON 数据示例如下：
{"cols":[{"label":"Data","type":"date"},
{"label":"OP1","type":"number"},
{"label":"OP2","type":"number"},
{"label":"OP3","type":"number"},
{"label":"OP4","type":"number"}],
"rows":[{"c":[{"v":"08-01-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-02-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-03-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-04-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-05-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-06-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-07-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-08-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-09-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"08-10-2016"},{"v":0},{"v":0},{"v":0},{"v":0}]}]}
【问题讨论】：
-
如果你看json，数字值是用引号括起来的吗？ (例如 --> "v":"100") -- 如果是这样，这可能会导致谷歌图表出现问题
-
你在 PHP 中使用
json_encode吗？如果是这样，该语句是什么样的？ -
这两个示例使用相同的数据，前者有效，后者无效。唯一的区别是前者不使用dashboard。
-
我明白，查看数据样本会有所帮助——代码看起来不错
-
$table=array(); $table['cols'][]=array('label' => 'Data', 'type' => 'string'); foreach ($uniqueNetworks as $net) $table['cols'][]=array('label' => $net, 'type' => 'number'); $rows = 数组（）；对于 ($j=0; $j (string) $uniqueData[$j]); foreach ($uniqueNetworks as $net) $temp[] = array('v' => (float) $p[$net][$j]); $rows[] = array('c' => $temp); } $table['rows'] = $rows; $jsonTable = json_encode($table);回声 $jsonTable;
标签： javascript charts google-visualization