Question

我试图设计类似于此的flot图表：

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>

可以有人帮帮我吗？类似的颜色，我似乎无法显示悬停数据

感谢。

Answer 1

这可以让你接近你想要的外观。

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。如果您仍然无法使用它，请使用细节更新您的问题，并使用最小代码示例来演示此问题。

创建flot图表样式

1 个答案: