简体   繁体   English

如何防止几个月使用php数据在JavaScript图表中重复出现?

[英]How to prevent months from repeating itself in a javascript chart using php data?

I am using this website as a reference as how to create charts dynamically using PHP data from a database. 我将此网站作为参考,以了解如何使用数据库中的PHP数据动态创建图表。 http://www.chartjs.org/ http://www.chartjs.org/

So now I have this code after replacing some data with some php code. 所以现在我用一些php代码替换了一些数据后有了这段代码。

<?php


$query = "SELECT * from `users` WHERE firstName = '$name' OR lastName = '$name' LIMIT 1";
$result = mysql_query($query); //<<<
$row = mysql_fetch_assoc($result);
$userid = $row['id'];
echo mysql_error();

$sql = "SELECT * FROM history WHERE userid = '$userid' ORDER BY `date` ASC";
$result = mysql_query($sql);

while($row = mysql_fetch_array($result))
{
$pointData[] = (int)$row["points"];
$dateData[] = date("d M", $row["date"] );


}

?>

<script>
var data = {
labels : <?php echo json_encode($dateData); ?>,
datasets : [
    {
        fillColor : "rgba(220,220,220,0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        data : <?php echo json_encode($pointData); ?>
    }
]
}

var graphOptions = 
{
bezierCurve: false,
scaleOverride: true,
scaleSteps: <?php echo max($pointData); ?>,
scaleStepWidth: 1,
scaleStartValue: 0
}
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Line(data, graphOptions);
</script>

As you can see everything is done through a script, but the problem is this. 如您所见,一切都是通过脚本完成的,但是问题是这样的。

The months are being repeated which makes the data look very hard to read. 重复的月份使数据看起来很难读取。 I made this table using data from a table that has a tuple for time whenever a point is added to a certain ID like this. 每当将点添加到这样的特定ID时,我都会使用具有时间元组的表中的数据制作此表。

在此处输入图片说明

So how do I stop the months from repeating itself? 那么,如何停止几个月的重复? Is it because the UNIX timestamp also records days? 是否是因为UNIX时间戳记也记录了几天? If so how do I stop that? 如果是这样,我该如何制止呢?

Based on your comment, using a monthly display instead of individual days, I would first generate a linear scale of all months and then add all your points to it (you could do the same for days, years, etc.). 根据您的评论,使用月度显示而不是单个日期,我将首先生成所有月份的线性比例,然后将所有点添加到其中(您可以对天,年等进行相同的操作)。

Something like: 就像是:

$months = array();
// using months for just one year, but you could easily adapt it for multiple years
for ($i = 1; $i <= 12; $i++)
{
  $months[$i] = 0;    // set the initial count to 0
}

// add the points to the appropiate months
while($row = mysql_fetch_array($result))
{
  $cur_month = date('n', $row["date"]);
  $months[$cur_month] += (int) $row["points"];
}

// your keys are the months and the values the total number of points
$dateData = array_keys($months);
$pointData = array_values($months);

Now you just have the month numbers on the horizontal axis, but that can easily be adapted. 现在,您只需在水平轴上显示月份号,即可轻松进行调整。 Also note that you can shorten this, I just used things like array_keys and array_values to show what is happening exactly and how the $months array relates to your code. 还要注意,您可以缩短此时间,我只是使用了array_keysarray_values类的东西来显示正在发生的事情以及$months数组与代码的关系。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何防止window.onload自身重复 - How to prevent window.onload from repeating itself 如何防止更改模块函数返回的对象而更改Javascript中的模块数据本身? - How can I prevent changes on the objects returned by the module functions from changing the module data itself in Javascript? javascript onclick在重复本身 - javascript onclick is repeating itself 如何从javascript数组本身向图表js添加数据? - How to add datas to chart js from javascript array itself? 防止Javascript创建日期过长的日期 - Prevent Javascript from creating dates with a large months 使用 PHP/MySQL、Javascript、Json 生成基于一个月和不同年份销售额的组合图 - Generate Combo Chart based one Months and different year sales using PHP/MySQL, Javascript , Json JavaScript getElemendById()。innerHTML = data.body.result重复自身...如何解决? - JavaScript getElemendById().innerHTML=data.body.result repeating itself…how to fix? 来自不同php文件的javascript图表数据? - javascript chart data from different php file? 如何防止在 Vue 3 和 JavaScript 中重复随机数 - How to prevent repeating random numbers in Vue 3 and JavaScript 设置alignTicksWithAxis时防止Flot Chart重复刻度 - Prevent Flot Chart from repeating ticks while alignTicksWithAxis is set
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM