โดยใช้ Chart.js.legend สามาร D/L ได้ที่ https://github.com/bebraw/Chart.js.legend
แล้วแก้ไข code ดังนี้
<?
$g_label="labels : ['1-01/01/56','2-01/02/56','3-01/032/56','4-01/04/56','5-01/05/56','6-01/06/56']";
$fbs_data="data : [100,125,120,128,100,130]";
$systolic_data="data : [120,150,110,180,100,120]";
$dyastolic_data="data : [80,110,70,120,60,80]";
?>
<!DOCTYPE html>
<html>
<head>
<link href="assets/chart_legent/demo.css" rel="stylesheet" type="text/css">
<script src="assets/chart_legent/Chart.js"></script>
<script src="assets/chart_legent/legend.js"></script>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title></title>
<script>
if(!!(window.addEventListener)) window.addEventListener('DOMContentLoaded', main);
else window.attachEvent('onload', main);
function main() {
lineChart();
}
function lineChart() {
var data = {
<? echo $g_label;?>,
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
//strokeColor : "rgba(220,220,220,1)",
//pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointColor : "rgba(255,128,0,1)", //สีส้ม
strokeColor : "rgba(255,255,0,1)", //สีเหลือง
pointHighlightFill : "#FF0000", //สีแดง
<? echo $fbs_data;?>,
title : 'FBS'
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(0,128,192,1)", //ฟ้าเข้ม
//pointColor : "rgba(151,187,205,1)",
pointColor : "rgba(0,0,255,1)", //blue
pointStrokeColor : "#fff",
<? echo $systolic_data;?>,
title : 'Systolic'
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
<? echo $dyastolic_data;?>,
title : 'Dyastolic'
}
]
};
var ctx = document.getElementById("lineChart").getContext("2d");
new Chart(ctx).Line(data);
legend(document.getElementById("lineLegend"), data);
// testing adding twice (should get same result)
legend(document.getElementById("lineLegend"), data);
showTooltips: true;
}
</script>
</head>
<body>
<br><br>
<div align="center">
กราฟแสดงแนวโน้มของค่าความดันโลหิตและระดับน้ำตาลในกระแสเลือด
<div>
<canvas id="lineChart" width="900" height="300"></canvas>
<div id="lineLegend"></div>
</div>
</div>
</body>
</html>
ไม่มีความคิดเห็น:
แสดงความคิดเห็น