创建流程图样式
我正在尝试将我的流程图设置为类似于以下内容：
这是我目前的图表：
这是我的图表代码，
<?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>
有人可以帮我吗？相似的颜色，而且我似乎也无法显示悬停数据
谢谢。
这应该让你接近你想要的外观。
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}
}
});
});
结果：
在这里摆弄。
至于你的悬停提示不能正常工作，有一个很好的例子在这里。按照此操作，如果您仍然无法使其正常工作，请使用详细信息和演示问题的最小代码示例更新您的问题。