php - ハイチャート: datetime で xAxis を強制的に表示する

Question

私のハイチャートチャートは現在このように表示されています: http://img90.imageshack.us/img90/3892/chart1p.png

しかし、次のようにする必要があります: http://img545.imageshack.us/img545/1333/chart2p.png

現在、時間ごとに空の値が表示されていません。

私のコード:

index.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);
?> 

したがって、(まだ十分に明確でない場合) 1 日全体を表示し、時間ごとに空の値も表示するには、このコードが必要です。

私はハイチャートとJavaScriptの経験がほとんどないので、これについて助けが必要です:)

また、index.php 内で MySql クエリを実行する別の方法を探しているので、data_today.php は必要ありません。

ありがとう

Answer 1

空のスペースには、null値が必要です。次に設定しconnectNulls: falseます。

例

Answer 2

以下のように xAxis を設定します

xAxis: {
    ordinal: false
}