nadesiko3
Version:
Japanese Programming Language
54 lines (49 loc) • 2.12 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>なでしこ3</title>
<!-- common -->
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" href="../src/wnako3_editor.css">
<script src="extlib/ace@1.4.12/ace.js" integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q==" crossorigin="anonymous"></script>
<script src="extlib/ace@1.4.12/ext-language_tools.min.js" integrity="sha512-8qx1DL/2Wsrrij2TWX5UzvEaYOFVndR7BogdpOyF4ocMfnfkw28qt8ULkXD9Tef0bLvh3TpnSAljDC7uyniEuQ==" crossorigin="anonymous"></script>
<script src="extlib/ace@1.4.12/ext-options.min.js" integrity="sha512-oHR+WVzBiVZ6njlMVlDDLUIOLRDfUUfRQ55PfkZvgjwuvGqL4ohCTxaahJIxTmtya4jgyk0zmOxDMuLzbfqQDA==" crossorigin="anonymous"></script>
<script src="extlib/ace@1.4.12/ext-code_lens.min.js" integrity="sha512-gsDyyKTnOmSWRDzUbpYcPjzVsEyFGSWeWefzVKvbMULPR2ElIlKKsOtU3ycfybN9kncZXKLFSsUiG3cgJUbc/g==" crossorigin="anonymous"></script>
<!-- flow -->
<link rel="stylesheet" type="text/css" href="css/flow.css">
</head>
<body>
<!-- ライブラリの取り込み -->
<script src="extlib/chart.js@3.2.1/chart.min.js"></script>
<script src="../release/wnako3.js?run"></script>
<script src="../release/plugin_csv.js"></script>
<!-- 描画先 -->
<div style="width:400px;margin-left:auto;margin-right:auto;">
<canvas id="chart_cv"></canvas>
<br><hr><br>
<canvas id="chart_cv2"></canvas>
<br><hr><br>
<canvas id="chart_cv3"></canvas>
</div>
<!-- データを与える -->
<script type="なでしこ3">
「#chart_cv」へ描画開始。
「科目,太郎,次郎
国語,78,80
算数,30,90
理科,50,77
社会,80,76」をCSV取得して棒グラフ描画。
「#chart_cv2」へ描画開始。
「科目,太郎,次郎
国語,78,80
算数,30,90
理科,50,77
社会,80,76」をCSV取得して線グラフ描画。
「#chart_cv3」へ描画開始。
「睡眠,8
勉強,2
おやつ,1
ゲーム,3」をCSV取得して円グラフ描画。
</script>
</body></html>