flot Attractive Javascript plotting for jQuery(その5)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><link href="layout.css" rel="stylesheet" type="text/css"></link><!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]--><script language="javascript" type="text/javascript" src="../jquery.js"></script><script language="javascript" type="text/javascript" src="../jquery.flot.js"></script><script language="javascript" type="text/javascript">function render() { var dataA = [[0, 0], [1, 1], [2, 1.5], [3, 2],[4, 2.5],[5, 3],[6, 2]]; var dataB = [[0, 1], [1, 0.5], [2, 1], [3, 0.7],[4, 0.3],[5, 0],[6, 0.5]]; var dataC = [[0, 0.5], [1, 3.5], [2, 2], [3, 1.8],[4, 1.3],[5, 0.7],[6, 1.4]]; var series1 = { label: "LABEL_A", data: dataA }; var series2 = { label: "LABEL_B", data: dataB }; var series3 = { label: "LABEL_C", data: dataC }; var legend = { show: true, labelBoxBorderColor: "rgb(0,0,0)", noColumns: 1, position: "nw", margin: 20, backgroundColor: "rgb(220,240,210)", backgroundOpacity: 1 }; var options = { lines: { show: true, lineWidth: 1 }, points: { show: true }, shadowSize: 4, xaxis: 1, yaxis: 1, colors:["rgb(255,0,255)","rgb(255,255,0)","rgb(0,255,255)"], legend: legend }; $.plot($("#placeholder"), [series1,series2,series3], options );}$(document).ready(render);</script><title>Flot Sample</title></head><body> <div id="placeholder" style="width:600px;height:300px;"></div></body></html>backgroundOpacity: 0.5backgroundOpacity: 0.1noColumns: 2position: "sw" (south west)position: "se" (south east)