创建海军报图表样式

-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

创建海军报图表样式

回答

相关问题