#!/usr/bin/perl -T use strict; use warnings; use Template; use CGI; use utf8; use Encode; use open ':utf8'; binmode STDIN, ":utf8"; binmode STDOUT, ":utf8"; my $q = new CGI; print $q->header(-charset => "UTF-8"); my $key = decode('utf-8', $q->param('key') || ""); my $style = $q->param('style') || "pie"; my $r_ref; ### vvvvv $r_ref = [ {label => "ハロー", val => 10}, {label => "foo", val => 20}, {label => "bar", val => 15}, ]; ### ^^^^^ my $tt = Template->new() || die $Template::ERROR, "\n"; my $vars = { r_ref => $r_ref, key => $key, style => $style, }; $tt->process(\*DATA, $vars) || die $tt->error(), "\n"; __END__ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>plotkit-cgi</title> <script type="text/javascript" src="/js/mochikit/MochiKit.js"></script> <script type="text/javascript" src="/js/plotkit/Base.js"></script> <script type="text/javascript" src="/js/plotkit/Layout.js"></script> <script type="text/javascript" src="/js/plotkit/Canvas.js"></script> <script type="text/javascript" src="/js/plotkit/SweetCanvas.js"></script> <script type="text/javascript" src="/js/plotkit/excanvas.js"></script> </head> <body> <h1>plotkit-cgi</h1> <form method="get"> <input type="text" name="key" value="[% key %]" size="80" /> <br /> [% FOR item = [ 'pie', 'bar', 'line' ] %] <input type="radio" name="style" value="[% item %]" [% IF style == item %]checked[% END %]>[% item %] [% END %] <input type="submit" value="go" /> </form> <script type="text/javascript"> var options = { "IECanvasHTC": "/js/plotkit/iecanvas.htc", "colorScheme": PlotKit.Base.palette(PlotKit.Base.baseColors()[0]), "padding": {left: 0, right: 0, top: 10, bottom: 30}, "xTicks": [[% FOR r_ref %]{v:[% loop.count - 1 %], label:"[% label %]"}, [% END %]], "axisLabelFontSize": 14, "drawYAxis": false }; function drawGraph() { var layout = new PlotKit.Layout("[% style %]", options); layout.addDataset("sqrt", [[% FOR r_ref %][[% loop.count - 1 %],[% val %]], [% END %]]); layout.evaluate(); var canvas = MochiKit.DOM.getElement("graph"); var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {}); plotter.render(); } MochiKit.DOM.addLoadEvent(drawGraph); </script> <div><canvas id="graph" height="300" width="300"></canvas></div> </body> </html>