如何防止月份在使用php数据的javascript图表中重复?

时间:2014-04-02 17:19:52

标签: javascript php mysql

我使用此网站作为参考,如何使用数据库中的PHP数据动态创建图表。 http://www.chartjs.org/

所以现在我用一些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>

正如您所看到的,一切都是通过脚本完成的,但问题在于此。

这几个月正在重复,这使得数据看起来很难阅读。我使用表中的数据制作了这个表,只要有一个点添加到这样的某个ID,该表就会有一个时间元组。

enter image description here

那么如何阻止这些月重演呢?是因为UNIX时间戳也记录了几天?如果是这样,我该怎么做呢?

1 个答案:

答案 0 :(得分:1)

根据您的评论,使用每月显示而不是个别日期,我首先生成所有月份的线性比例,然后将所有点数添加到它(您可以在数天,数年等情况下执行相同操作)。

类似的东西:

$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);

现在您只需在横轴上显示月份数字,但可以轻松调整。另请注意,您可以缩短此时间,我只使用array_keysarray_values之类的内容来准确显示正在发生的事情以及$months数组与您的代码的关系。