質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Q&A

解決済

1回答

1559閲覧

Chart.jsのデータをhtmlのテーブルに表示したい

nagano0141cafe

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

0グッド

0クリップ

投稿2020/10/20 04:58

編集2020/10/20 08:35

閲覧ありがとうございます。

前提・実現したいこと

現在勉強用に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')

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

回答をいただけませんでしたので、回答を閉じさせていただきます。
ありがとうございました。

投稿2020/11/23 07:09

nagano0141cafe

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問