閲覧ありがとうございます。
前提・実現したいこと
現在勉強用にChart.jsを使用して棒グラフを書いているのですが、棒グラフに使用しているデータ(数値)をjs内で取得してhtmlに表示したいと思っています。(labelsとdatasets内dataにて設定しているデータをtableタグのth, tdに出力したい...)
ただその方法を検索してもサンプルになるサイトが出てこないので困っている状況です。
その際、tableを使用して視覚的にわかりやすくしたいということ、プラグインの使用は考えていないことの2点を希望しています。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <title>チャートプロトタイプ</title> 7 <link rel="stylesheet" href="style.css"> 8 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 9</head> 10<body> 11 <div class="content_wrapper"> 12 <h1 class="content_index">チャートプロトタイプ</h1> 13 <div class="chart"> 14 <div class="line_chart"> 15 <h2 class="chart_index">LineChart</h2> 16 <canvas id="js_line_chart" class="chart_figure"> 17 </canvas> 18 <div class="chart_table"> 19 <table class="visiter"> 20 <tr> 21 <th class="table_index"></th> 22 <td class="table_data"></td> 23 </tr> 24 </table> 25 <table class="pv"> 26 <tr> 27 <th class="table_index"></th> 28 <td class="table_data"></td> 29 </tr> 30 </table> 31 <table class="session"> 32 <tr> 33 <th class="table_index"></th> 34 <td class="table_data"></td> 35 </tr> 36 </table> 37 </div> 38 </div> 39 </div> 40 </div> 41 <script type="text/javascript" src="./js/index.js"></script> 42</body> 43</html>
css
1@charset "UTF-8"; 2 3* { 4 padding: 0; 5 margin: 0; 6} 7body { 8 color: #333; 9 height: 100%; 10 max-width: 100%; 11} 12.content_index { 13 text-align: center; 14 background-color: #1e90ff; 15 color: #fff; 16 padding: 1% 0; 17} 18.chart { 19 padding: 0 4% 4%; 20} 21.chart_index { 22 text-align: center; 23 margin-top: 4%; 24} 25.chart_figure { 26 border: 1px solid #a9a9a9; 27 margin-top: 4%; 28} 29.chart_table { 30 display: flex; 31 justify-content: space-around; 32 padding: 0 16%; 33 margin-top: 4%; 34}
js
1//折れ線グラフ 2var plc = document.getElementById("js_line_chart"); 3var protoLineChart = new Chart(plc, { 4 type: 'line', 5 data: { 6 //凡例のラベル 7 labels: ['1月', '2月', '3月', '4月', '5月'], 8 datasets: [ 9 { 10 label: '訪問者数', //データ項目のラベル 11 fill: false, //背景塗りつぶし 12 lineTension: 0, //描画線を直線化 13 data: [120,140,180,150,210], //グラフのデータ 14 borderColor: "rgba(200,112,126,1)" 15 },{ 16 label: 'PV数', //データ項目のラベル 17 fill: false, //背景塗りつぶし 18 lineTension: 0, //描画線を直線化 19 data: [190,230,380,320,480], //グラフのデータ 20 borderColor: "rgba(80,126,164,1)" 21 },{ 22 label: 'セッション数' ,//データ項目のラベル 23 fill: false, //背景塗りつぶし 24 lineTension: 0, //描画線を直線化 25 data: [160,180,220,190,300], //グラフのデータ 26 borderColor: "rgba(230,180,34,1)" 27 } 28 ] 29 }, 30 options: { 31 title: { 32 display: true, 33 text: 'Aサイト訪問者分析'//グラフタイトル 34 }, 35 scales: { 36 yAxes: [{ 37 ticks: { 38 suggestedMax: 250, //最大値 39 suggestedMin: 0, //最小値 40 stepSize: 50, //縦ラベルの数値単位 41 } 42 }] 43 }, 44 } 45});
補足情報(FW/ツールのバージョンなど)
使用しているChart.jsはCDNにて取得しています。
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js
jsのdata:[]内にてvarで変数を宣言すれば取得したいデータを絞って取得できると思ったのですが、そもそも宣言ができなかったため断念でした。(エラー:Uncaught SyntaxError: Unexpected token 'var')
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。