Highcharts：炫耀武力X轴与日期时间

我highcharts图表显示现在这个样子： http://img90.imageshack.us/img90/3892/chart1p.png Highcharts：炫耀武力X轴与日期时间

但我需要它看起来像这样： 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); 
?>

所以，（如果它不够明确但）我需要这个代码显示整天按小时显示空值。

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

也在寻找另一种方式来运行的index.php里面MySQL查询，所以我不需要data_today.php

感谢

来源

2013-03-23 plexcell

设置X轴如下

xAxis: { 
    ordinal: false 
}

来源

2013-03-23 21:46:59 craig1231

嘿，那没有做任何改变：/ – plexcell 2013-03-23 23:57:44

对于你应该有null值空的空间。然后设置connectNulls: false。

Example

来源

2013-03-25 12:23:01

Highcharts：炫耀武力X轴与日期时间

回答

相关问题