만들기 FLOT 차트 스타일과 유사한 내 FLOT 차트 스타일을 시도

-1

메신저 :만들기 FLOT 차트 스타일과 유사한 내 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>

누군가 나를 도와주세요. 비슷한 색상 및 또한 내가 위아래로 표시 데이터를 얻을 것 같다

감사합니다.

출처

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

만들기 FLOT 차트 스타일과 유사한 내 FLOT 차트 스타일을 시도

답변

관련 문제