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軸與日期時間

回答

相關問題