0

我的 highcharts 图表现在显示如下：http: //img90.imageshack.us/img90/3892/chart1p.png

但我需要它看起来像这样：http: //img545.imageshack.us/img545/1333/chart2p.png

目前它没有按小时显示空值。

我的代码：

索引.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
    var chart;
    $(document).ready(function () {
        var options = {
            chart: {
                renderTo: 'chart',
                defaultSeriesType: 'spline'
            },
            title: {
                text: 'Earnings Today',
            },
            subtitle: {
                text: ''
            },
            xAxis: {
                type: 'datetime',
                tickInterval: 3600 * 1000,
                tickWidth: 0,
                labels: {
                    align: 'center',
                    formatter: function () {
                        return Highcharts.dateFormat('%l%p', this.value);
                    }
                },
            },
            yAxis: {
                title: {
                    text: 'Earnings'
                },
                min: 0,
                tickInterval: 2,
            },
            plotOptions: {
                spline: {
                    marker: {
                        radius: 4,
                        lineColor: '#666666',
                        lineWidth: 1
                    }
                }
            },
            tooltip: {
                valueDecimals: 2,
                crosshairs: true,
                formatter: function () {
                    return '$' + this.y;
                }
            },
            series: [{
                    name: 'Earnings Today, USD'
                }
            ]
        }
        jQuery.get('data_today.php', null, function (tsv) {
            var lines = [];
            earnings = [];
            try {
                tsv = tsv.split(/\n/g);
                jQuery.each(tsv, function (i, line) {
                    line = line.split(/\t/);
                    date = Date.parse(line[0] + ' UTC');
                    val = line[1];
                    earnings.push([date, parseFloat(line[1].replace(',', '.'), 10)]);
                });
            } catch (e) {}
            options.series[0].data = earnings;
            chart = new Highcharts.Chart(options);
        });
    });
</script>

data_today.php

<?php
session_start();
require_once('config.php');
require_once('config_mysql.php');

$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if (!$link)
{
    die('Failed to connect to server: ' . mysql_error());
}

$db = mysql_select_db(DB_DATABASE);
if (!$db)
{
    die("Unable to select database");
}

$result = mysql_query("SELECT earn_date,SUM(amount) as val FROM user_earnings WHERE user_id='$USER_ID' AND DATE(earn_date) = DATE(NOW()) GROUP BY earn_date");
if ($result)
{
    while ($row = mysql_fetch_array($result))
    {
        $d = date("l, F, j, Y G:i:s", strtotime($row["earn_date"]));
        echo $d . "\t" . $row['val'] . "\n";
    }
}
else
{
    die(mysql_error());
}
mysql_close($link);
?>

所以，（如果还不够清楚的话）我需要这段代码来显示一整天并按小时显示空值。

我对 highcharts 和 javascript 的经验几乎为零，所以我需要一些帮助:)

也在寻找在 index.php 中运行 MySql 查询的替代方法，所以我不需要 data_today.php

谢谢

4

2 回答 2

0

设置xAxis如下

xAxis: {
    ordinal: false
}
于 2013-03-23T21:46:59.680 回答
0

对于空格，您应该有null值。然后设置connectNulls: false。

例子

于 2013-03-25T12:23:01.257 回答