創建海軍報圖表樣式

-1

我嘗試風格我與此類似海軍報圖表：創建海軍報圖表樣式

chart style

這是我目前的圖表： current chart

這裏是我的海圖編，

<?php 
include('Includes/connect.php'); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs"> 
<head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf8"/> 
<title>Index</title> 
<script src="Includes/jquery-1.8.3.js"></script> 
<script src="Includes/jquery.flot.js"></script> 
<script src="Includes/jquery.flot.time.js"></script> 
</head> 
<?php 
// Main query to pull data from 'tests' table 
    $sql = "SELECT UNIX_TIMESTAMP(`date`)*1000 AS unixDate,`date`, `test1`, `test2`, `test3`, `test4`, `test5`, `test6`, `test7`, `test8`, `test9`, `test10`, `test11`, `test12`, `test13`, `test14` FROM `tests` WHERE member_id = '1' ORDER by `date` ASC"; 
    $result = mysql_query($sql) or die ("no query"); 

// Dataset1 
while($row = mysql_fetch_assoc($result)) { 
    $dataset1[] = array($row['unixDate'], sprintf("%.3f", $row['test1']));} 
?> 
<div id="chart1" style="width:700px;height:300px;"></div> 
<script type="text/javascript"> 
    //Chart1 
    var chart1Options = { 
     xaxis: {mode: "time", timeformat: "%Y-%m-%d"}, 

     lines: { show: true, color: "#fff" }, 
     points: { show: true }, 
     grid: { 
      backgroundColor: { colors: ["#4ca8fa", "#2887da"] }, 
      bordercolor: "#fff", 
      borderwidth: "60", 
      hoverable: true } 
    }; 

    var dataset1 = { data: <?php echo json_encode($dataset1); ?>,}; 

    $.plot($("#chart1"), [ dataset1 ], chart1Options); 
</script> 
</body> 
</html>

任何人都可以幫我嗎？類似的顏色，我也似乎無法得到懸停數據顯示了

謝謝。

來源

2014-01-05 Stephen Jackson

這應該讓你接近你想要的外觀。

HTML：

<div id="placeholder" style="width:400px;height:300px;background-color: #6EB5F0"></div>

JS：

$(function() { 

    var plot = $.plot($("#placeholder"),[ 
     { data: [[0,0],[1,1],[2,4],[3,3],[4,5],[5,7],[6,9],[7,10],[8,8],[9,12]], color: 'white'} 
    ], { 
     series: { 
      lines: { show: true, fill: true, fillColor: 'rgba(143, 198, 242, 0.7)' }, 
      points: { show: true} 
     }, 
     grid: { color: 'transparent' }, 
     xaxis: { 
      color: 'white', 
      font: { color: 'white', family: 'sans-serif', size: 11} 
     }, 
     yaxis: { 
      color: 'white', 
      font: { color: 'white', family: 'sans-serif', size: 11} 
     } 
    }); 
});

結果：

enter image description here

小提琴here。

只要你的懸停工具提示不起作用，就有一個很好的例子here。如果你仍然無法正常工作，請更新你的問題細節和最小代碼示例演示了這個問題。

來源

2014-01-05 23:14:20 Mark

真棒。非常感謝你。 –

是否可以將xaxis上的刻度限制爲僅從數據庫中提取的數據？它似乎在通過查詢拉取的值之間添加了滴答（日期）？ –

要將刻度準確地放置在您想要的位置，您必須指定一個刻度數組（https://github.com/flot/flot/blob/master/API.md#customizing-the-axes），因爲您循環你的數據創建第二個數組，只是用'$ row ['unixDate']'填充。 – Mark

創建海軍報圖表樣式

回答

相關問題