php - 谷歌图表表现异常
问题描述
所以我有这个从数据库中获取数据的谷歌图表,它看起来像这样:
如您所见,一条线被拖过所有数据(越走越严重)
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="dashboard">
<div id="chart_div"></div>
<div id="control_div"></div>
<div id='dbgchart'></div>
</body>
</html>
<?php
include "../includes/db_conn.php";
$sql = "SELECT FD_DATUM_INGEVOERD || ' ' || FT_TIJD_INGEVOERD FROM BANDZENDINGEN WHERE FD_DATUM_INGEVOERD BETWEEN '2012-06-04' AND '2012-06-05' AND FI_GEBRUIKER1='205'";
$sfm = $dbh->prepare($sql);
$sfm->execute();
$sqla = "SELECT FI_AFVOERKANAAL FROM BANDZENDINGEN WHERE FD_DATUM_INGEVOERD BETWEEN '2012-06-04' AND '2012-06-05' AND FI_GEBRUIKER1='205'";
$sfma = $dbh->prepare($sqla);
$sfma->execute();
$dateArr = $sfm->fetchAll(PDO::FETCH_COLUMN, 0);
$numbers = $sfma->fetchAll(PDO::FETCH_COLUMN, 0);
?>
<script type="text/javascript">
google.charts.load('44', {
callback: drawAxisTickColors,
packages: ['controls', 'corechart']
});
function drawAxisTickColors() {
var data = new google.visualization.DataTable();
data.addColumn('datetime', 'Date');
data.addColumn('number', 'value');
var dateArr2 = (<?php echo json_encode($dateArr); ?>);
console.log(dateArr2);
var bitcoinArr = (<?php echo json_encode($numbers); ?>);
console.log(bitcoinArr);
bitcoinArr = bitcoinArr.map(Number);
var array = [];
var length = Math.min(dateArr2.length, bitcoinArr.length);
for (var i = 0; i < length; ++i) {
array.push([ new Date(dateArr2[i]), bitcoinArr[i] ]);
}
data.addRows(array);
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control_div',
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
height: 50,
width: 600,
chartArea: {
width: '80%'
}
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
options: {
width: 620,
chartArea: {
width: '80%'
},
hAxis: {
format: 'hh:ss',
slantedText: false,
maxAlternation: 1
}
}
});
function setOptions() {
var firstDate;
var lastDate;
var v = control.getState();
if (v.range) {
document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
firstDate = new Date(v.range.start.getTime() + 1);
lastDate = new Date(v.range.end.getTime() - 1);
data.setValue(v.range.start.getMonth(), 0, firstDate);
data.setValue(v.range.end.getMonth(), 0, lastDate);
} else {
firstDate = data.getValue(0, 0);
lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
}
var ticks = [];
for (var i = firstDate.getMonth(); i <= lastDate.getMonth(); i++) {
ticks.push(data.getValue(i, 0));
}
chart.setOption('hAxis.ticks', ticks);
chart.setOption('hAxis.viewWindow.min', firstDate);
chart.setOption('hAxis.viewWindow.max', lastDate);
if (dash) {
chart.draw();
}
}
setOptions();
google.visualization.events.addListener(control, 'statechange', setOptions);
var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
dash.bind([control], [chart]);
dash.draw(data);
}
</script>
我已经尝试删除毫秒,没关系。
那么我做错了什么?为什么会这样?请帮忙。
编辑
刚刚发现了一些东西,它会跳过某些数字,例如:2012-06-04 07:03:06 14 数据存在,但从未显示
编辑
我发现了问题
if (v.range) {
document.getElementById('dbgchart').innerHTML = v.range.start + ' to ' + v.range.end;
firstDate = new Date(v.range.start.getTime() + 1);
lastDate = new Date(v.range.end.getTime() - 1);
data.setValue(v.range.start.getMonth(), 0, firstDate);
data.setValue(v.range.end.getMonth(), 0, lastDate);
} else {
firstDate = data.getValue(0, 0);
lastDate = data.getValue(data.getNumberOfRows() - 1, 0);
}
data.setValue 是问题所在,但我该如何解决呢?
解决方案
要纠正在所有数据中拖动行的问题,请
在加载行后对数据表进行排序...
data.addRows(array);
data.sort([{column: 0}]);
推荐阅读
- python - 从 github 代码组织中克隆所有代码仓库的 python 脚本
- javascript - 每次使用同一个 JavaScript 函数时,如何获得一个新值?
- python - 如何使用 lambda 和 python 在 s3 上压缩文件
- python - 检查 get_source() 在作为参数传递给函数并且换行时不返回完整的 lambda 代码?
- amazon-web-services - 我正在使用带有颤振框架的aws。我试图删除一个auth cognito pool并尝试放大推送然后得到这个错误请帮我解决
- javascript - 页面加载后的 Cheerio 选择器
- angular - 步进器材料:在打字稿中使用 stepper.reset()
- android - Paypal 集成 Django Rest Api/ Android 客户端
- c# - 在罚款前添加 $ 符号
- vuejs3 - 在 vuetify next 中全局更改主题