プログラミング学習の記録 142 JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)の練習問題3.4

開発環境:Microsoft Visual Web Developer+Internet Explorer Script言語:JavaScript

"JavaScript 2 Webアプリケーションの基礎とJavaScriptを使ったプログラミングテクニック (CD-ROM付) (プログラミング学習シリーズ)"のp.81の練習問題3.4を解いてみる。



3.4
<script type="text/javascript" src="http://www.mkamimura.com/prototype.js"></script> <script type="text/javascript" src="http://www.mkamimura.com/excanvas.js"></script> <script type="text/javascript" src="http://www.mkamimura.com/plotr.js"></script> <p>折れ線グラフ</p> <input type="button" value="Click!" onclick="clicked()" /> <div><canvas id="graph" height="200" width="400" /></div> <script language="JavaScript" type="text/javascript"> function clicked() { var dataset = { "本年度売上": [[0, 10], [1, 15], [2, 12], [3, 19], [4, 25], [5, 26], [6, 30]] }; var options = { shouldFill: false, padding: { left: 180, right: 0, top: 10, bottom: 10 }, backgroundColor: "#dbdbdb", colorScheme: "#000055" }; var gLine = new Plotr.LineChart("graph", options); gLine.addDataset(dataset); gLine.render(); } </script> <div id="d0"></div>

折れ線グラフ