JavaScriptのfor of文をIE11用に
- chart.jsの多重円グラフで系列表示についての問題を解決するために、JavaScriptのfor of文をIE11に対応させる方法について教えてください。
- WebブラウザーのレンダリングエンジンがIE11相当である場合、for of構文によって表示されない問題が発生します。babelを使用してコードを書き換え、グラフの表示はできるようになりましたが、ボタンの動作が無反応です。
- 他の反復処理の方法を試しましたが、自分の知識ではうまく対処できません。IE11にも適用可能なfor文の代替方法を教えてください。
- ベストアンサー
javascriptのfor of文をIE11用に
前に質問した、「chart.jsの多重円グラフで系列表示について」から得た回答から派生した問題についてです。htmlでのボタン処理を行う方法をfilemakerのwebビューアで使おうとしたところの表示ブラザーがwindows版ではレンダリングエンジンがIE11相当らしいのでfor of構文の部分が引っかかりグラフが表示できませんでした。そこでbabelの使用を教えられ、babelで書き換え処理を施した後ブラウザーで表示させたところ普通に動作しましたが、webビューアに適用したところ表示まではできたのですがボタン動作は無反応です。それなら反復処理を他の方法でもと思いましたが、私のjavascriptの生かじりの知識では太刀打ちできないので、教えてもらった下記コードをIE11にも適用できるようご教授おねがいいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>円グラフ</title> </head> <body> <canvas id="myPieChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script type="text/javascript" src="Chart.js"></script> <script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script> <div class="button"> <button class="toggleDataset" data-id="0">仙台</button> <button class="toggleDataset" data-id="1">札幌</button> <button class="toggleDataset" data-id="2">渋谷</button> </div> <style> .button { left: 200px; position:relative; } </style> <script> var datasets = [ { label: '仙台', data: [320000, 590000, 400000, 420000, 380000, 250000, 420000], }, { label: '札幌', data: [520000, 450000, 380000, 280000, 590000, 400000, 530000], }, { label: '渋谷', data: [650000, 230000, 480000, 600000, 620000, 700000, 760000], }, ]; var visibility = [1, 1, 1]; // 各データの表示状態フラグ 1: 表示、0: 非表示 var ctx = document.getElementById('myPieChart'); var config = { type: 'pie', data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], datasets: datasets }, options: { responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, text: '' }, legend: { // 凡例 display: true, // 表示の有無 position: 'top' // 表示位置 } }, plugins: { colorschemes: { scheme: 'office.Red6' //現状ではデフォルトでしか機能しない } } }; window.myPieChart = new Chart(ctx, config); var buttons = document.getElementsByClassName('toggleDataset'); for(button of buttons){ button.addEventListener('click', function(e){ // クリックされたボタンに応じてデータの表示切り替え var dataId = e.target.getAttribute('data-id'); if(visibility[dataId] == 1){ // 非表示 config.data.datasets = config.data.datasets.filter( data => data != datasets[dataId] ); e.target.style = 'text-decoration: line-through;'; }else{ // 表示 config.data.datasets.push(datasets[dataId]); e.target.style = ''; } // 表示状態フラグとグラフの更新 visibility[dataId] = 1 - visibility[dataId]; window.myPieChart.update(); }); } </script> </body> </html>
- turu575
- お礼率76% (71/93)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
No.1の補足・お礼に対して回答します。 変数を宣言する際のconstは、最近追加されたJavaScriptの仕様です。IE11は完全には対応していないので、babelで変換するか元からvarを用いて定義するほうが安全です。 constはvarよりも制限された変数で、再代入と再宣言を許可しません。 取り消し線が表示されないのはe.target.styleに直接代入していたからでした。最近のブラウザでは問題なく動作しますが、本来e.target.styleは読み取り専用であり（詳しくは参考文献をご覧ください）、キャメルケースのプロパティに代入することでIE11でも動作しました。下記にコードを示します。 for (var i = 0; i < buttons.length; i++) { var button = buttons[i]; button.addEventListener('click', function (e) { // クリックされたボタンに応じてデータの表示切り替え var dataId = e.target.getAttribute('data-id'); if (visibility[dataId] == 1) { // 非表示 config.data.datasets = config.data.datasets.filter(function (data) { return data != datasets[dataId]; }); e.target.style.textDecoration = 'line-through'; } else { // 表示 config.data.datasets.push(datasets[dataId]); e.target.style.textDecoration = 'none'; } // 表示状態フラグとグラフの更新 visibility[dataId] = 1 - visibility[dataId]; window.myPieChart.update(); }); } 参考 - ElementCSSInlineStyle.style：https://developer.mozilla.org/ja/docs/Web/API/ElementCSSInlineStyle/style
その他の回答 (1)
- Proof4
- ベストアンサー率78% (151/192)
for (button of buttons) { を for (var i = 0; i < buttons.length; i++) { var button = buttons[i]; としたら手元のIE11(Windows10)では動作しました。 原理としてはbuttonsのインデックスをforでインクリメントさせ、インデックスをもとにbuttonを取得しています。
お礼
回答有難う御座います。ご指摘の箇所を書き換えブラウザ（Firefox）で試したところ問題なく動作したので、filemakerのwebビューアに組み込み表示させたところグラフは読み込めませんでした。やはりIE11相当は手強いぞ厭きてましたが。はてなと思いダメ元でそのscript部をbabelで変換し再度webビューアに組み込み表示させたところ今度は問題なく動作しました。なぜかと問われてもvarとconstは同じだと思っているような私にはわかりかねますので変換後のコードを下記に記します。このコードが正しいかどうかもわからない私ですのでもし何か問題があれば再度のご教授宜しくお願いいたします。 for (var i = 0; i < buttons.length; i++) { var button = buttons[i]; button.addEventListener('click', function (e) { // クリックされたボタンに応じてデータの表示切り替え var dataId = e.target.getAttribute('data-id'); if (visibility[dataId] == 1) { // 非表示 config.data.datasets = config.data.datasets.filter(function (data) { return data != datasets[dataId]; }); e.target.style = 'text-decoration: line-through;'; } else { // 表示 config.data.datasets.push(datasets[dataId]); e.target.style = ''; } // 表示状態フラグとグラフの更新 visibility[dataId] = 1 - visibility[dataId]; window.myPieChart.update(); }); }
補足
やはりwebビューア表示に問題がありました、系列を非表示にした場合のTextに対しての横線が表示されていませんでした。filemakerのレンダリングエンジンは問題児ですね。
関連するQ&A
- chart.jsのグラフを複数個表示する方法
今回は、chart.jsのグラフを複数表示する方法についてお尋ねします。一応下記のコードで棒グラフ×1、円グラフ×3を上下2個ずつ配置出来るようにまではなったのですが、ただ単に1個のグラフのコードを4回繰り返したようなものですので無駄が多く冗長なコードになっています。これをもっとコンパクトなものに出来ないかと思い投稿した次第です。html,css,javascriptに関しては専門家でないのでつまみ食い程度の知識で間に合わせたお粗末なコードですが、宜しくご教授願います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 70%;" > <div class="chart1" style="float: left;" > <canvas id="myChart1" width="550" height="450"></canvas></div> <div class="chart2" style="float: right;"> <canvas id="myChart2" width="550" height="450"></canvas></div> <div class="chart3" style="bottom: 0;float: left;"> <canvas id="myChart3" width="550" height="450"></canvas></div> <div class="chart4" style="bottom: 0;float: right;"> <canvas id="myChart4" width="550" height="450"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script src="https://unpkg.com/chartjs-plugin-colorschemes"></script> <script> Chart.defaults.global.legend.labels.usePointStyle = false; //以降の凡例スタイルを矩形のまま var ctx = document.getElementById("myChart1"); var myPieChart = new Chart(ctx, { type: 'bar', data: {labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル datasets: [ {label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]}, {label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]}, {label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000]}]}, options: { plugins: { colorschemes: {scheme: 'office.Slice6'}}, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: false, text:''}, legend: { // 凡例 display: true, // 表示の有無 position: 'top' } // 表示位置 }}); Chart.defaults.global.legend.labels.usePointStyle = true; //以降の凡例スタイルを矩形を円に変える var ctx = document.getElementById("myChart2"); var myPieChart = new Chart(ctx, { type: 'pie', data: {labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル datasets: [{label:'仙台' ,data: [320000, 590000, 400000, 420000, 380000, 250000, 420000]}]}, options: { plugins: { colorschemes: {scheme: 'brewer.DarkTwo7'}}, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, text:'仙台'}, legend: { // 凡例 display: true, // 表示の有無 position: 'left',} // 表示位置 }}); var ctx = document.getElementById("myChart3"); var myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['1月','2月','3月','4月','5月','6月','7月'], // Ｘ軸のラベル datasets: [{label:'札幌' ,data: [520000, 450000, 380000, 280000, 590000, 400000, 530000]}]}, options: { plugins: { colorschemes: {scheme: 'brewer.DarkTwo7'}}, responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 title: { display: true, text:'札幌'}, legend: { // 凡例 display: true, // 表示の有無 position: 'left'} // 表示位置 }}); </script> </body> </html> 文字数の関係で渋谷のグラフ（myChart4）の部分はカットしました。
- ベストアンサー
- JavaScript
- chart.js4.2でカラー設定をする方法
過去にこのサイトでchart.js2.9を使い複数グラフを表示する方法(https://okwave.jp/qa/q9834370.html)を教えてもらいましが、今回v.4.2にそれを適用するにあたりプラグインのカラー設定に代わる方法がないかと試行を繰り返し、素人のため無理筋の方法ですが下記のコードまで至りました。そこで、このお粗末なコードを適切なものに手直ししていただきたくお願い申し上げます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;width:300px; height:250px" > <canvas id="myChart1"></canvas></div> <div class="chart2" style="float: right;width:300px; height:250px"> <canvas id="myChart2"></canvas></div> <div class="chart3" style="bottom: 0;float: left;width:300px; height:250px"> <canvas id="myChart3"></canvas></div> <div class="chart4" style="bottom: 0;float: right;width:300px; height:250px"> <canvas id="myChart4"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.1/chart.umd.js"></script> <script> function displayChart(canvasId, chartType, datasets, options) { var ctx = document.getElementById(canvasId); var myPieChart = new Chart(ctx, { type: chartType, data: { labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], // Ｘ軸のラベル datasets: datasets }, options: { plugins: { //responsive: false, title: { display: options.title.length > 0, // タイトルがあれば表示 text: options.title }, legend: { // 凡例 display: true, // 表示の有無 position: options.legendPosition, // 表示位置 labels: { usePointStyle: options.usePointStyle // 円の凡例スタイルを使うか } } } } }); } const color1 = ['red','green','skyblue']; const mycolor = ['rgb(221,160,221)','rgb(228,0,127)','rgb(160,216,239)','rgb(146,7,131)','rgb(0,153,68)','rgb(255, 215, 0)','rgb(0,158,150)']; const label1 = [ {label: '仙台',data: [320000, 590000, 400000, 420000, 380000, 250000, 420000],backgroundColor:mycolor}, {label: '札幌',data: [520000, 450000, 380000, 280000, 590000, 400000, 530000],backgroundColor:mycolor}, {label: '渋谷',data: [650000, 230000, 480000, 600000, 620000, 700000, 760000],backgroundColor:mycolor} ]; const datasets = [ {label: label1[0].label,data: label1[0].data,backgroundColor:color1[0]}, {label: label1[1].label,data: label1[1].data,backgroundColor:color1[1]}, {label: label1[2].label,data: label1[2].data,backgroundColor:color1[2]} ]; displayChart('myChart1', 'bar', datasets,{ title: '', usePointStyle: false, legendPosition: 'top', }); for (var i = 0; i < 3; i++) { displayChart("myChart".concat(i + 2), 'pie', [label1[i]], { title: label1[i].label, backgroundColor:mycolor, usePointStyle: true, legendPosition: 'left' }); } </script> </body> </html> 特にbackgroundColorの設定をoptionで設定出来ないかと思いましたが方法が分かりませんでしたのでこのようなコードをに成り果てました。 また、カラースキーム組み合わせは別の手段を使って作りコピペしているのですがこれも貧弱なものですので、使えるプラグインがあればご教授お願いいたします。
- ベストアンサー
- JavaScript
- chart.jsのコードを2.9から4.2に変換
以前使っていたchart.jsのバージョン2.9系から最新の4.2系に変えたいと思い試行しています。基本的なサンプルはなんとかなるのですが、3系統に変わってから大きく変化した部分が全く理解しないまま2系統を使い続けて来たのが現況です。今回、4系統に挑戦するにあたり下記の2系統で人口ピラミッドのためのコードの書き換え方をお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>multiグラフ</title> </head> <body> <div class="row" style="width: 100%;" > <div class="chart1" style="float: left;" > <canvas id="myChart1" width="300" height="450"></canvas></div> <div class="chart2" style="left: 300px"> <canvas id="myChart2" width="350" height="450"></canvas></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> <script> Chart.defaults.global.defaultFontColor = 'black'; var ctx = document.getElementById("myChart1").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{ stacked: true, ticks: { callback: function (v){ return Math.abs(v) } } }], yAxes: [{stacked: true, ticks: { display: false } }] } } }); var ctx = document.getElementById("myChart2").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: '' }, scales: { xAxes: [{ stacked: true, }], yAxes: [{stacked: true }] }, } }); </script> </body> </html> これは、Y軸のラベル表示を真ん中に置きたいがため2個のcanvasを強引に並べています。 ちなみに、canvas分けないで一つだけにしてY軸を左端にした場合で試したところ。 "horizontalBar"の部分を type: "bar", options: { indexAxis: "y", }, に代えても 肝心の「xAxes」の部分をどう変えていいか分からないためそままにしておいたら、当然のごとく Invalid scale configuration for scale: xAxes Invalid scale configuration for scale: yAxes のエラーメッセージが出てグラフも左右でなく上下の状態となります。 コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。
- 締切済み
- JavaScript
- javascriptで困ってます。
モーダルを実装するプラグイン「colorbox」を使用してgooglemapを表示しようとしてるのですがうまくいきません。以下のように作ってみたのですが、地図の一部しか読み込まれません。 いろいろ調べてみると非表示にしていたdivにgooglemapを読み込んでいるので、高さ、幅が決まっていない状態なので、地図の一部しか読み込まれないということでした。 <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> のあたりも無理な記述になっています。 colorboxで非表示になっていたdivが表示になったときに地図をきちんと読み込まれるようにするにはどのようにすればよいのでしょうか？よろしくお願いします。 <html> <head> <link rel="stylesheet" type="text/css" href="css/colorbox.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script src="js/jquery.colorbox.js"></script> <script type="text/javascript"> function initialize() { var latlng = new google.maps.LatLng(34.0,135.0); var opts = { zoom: 10, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); var m_latlng = new google.maps.LatLng(34.0,135.0); var marker = new google.maps.Marker({ position: m_latlng, map: map }); } $(function(){ $('.inline').colorbox({ inline:true, width:"80%", height:"80%", }); }); </script> </head> <body> <a href="#inline_content" class="inline" title="" >googlmap</a> <div style='display:none'> <div id='inline_content'> <div id="map_canvas" style="width:100%; height:100%"><script>initialize();</script></div> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- chart.jsでx軸の表示値をカスタマズする方法
いつもお世話になっております。今回、chart.jsで水平横棒グラフ使ったピラミッドチャートのx軸の片方の系列の値をカスタマイズする方法につて伺います。下記のコードの方法では左側の男の方の値が－表示になってしまいます。これを＋表示に変更する方法についての相談です。目盛表示のカスタマイズには、ticks の callback にコールバックを定義すれば可能だと思いますが、左右違う系列の場合どうすればいいのか分かりません。もし可能ならばその方法をご教授願います。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>棒グラフ</title> </head> <body> <canvas id="myBarChart" width="550" height="480"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script> <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var myChart = new Chart(ctx, { type: "horizontalBar", // 水平棒グラフ data: { labels: ['90歳以上','85～89歳','80～84歳','75～79歳','70～74歳','65～69歳','60～64歳','55～59歳','50～54歳','45～49歳','40～44歳','35～39歳','30～34歳','25～29歳','20～24歳','15～19歳','10～14歳','5～9歳','0～4歳'], datasets: [ { label:'男',data: [-3790,-8605,-14805,-16655,-19641,-29027,-26151,-22360,-19752,-19288,-22510,-20397,-17238,-14645,-12763,-16385,-15610,-14625,-13880,], backgroundColor: "red" }, { label:'女',data: [13400,18358,23241,22544,23231,29351,25690,22067,20064,19011,21714,19305,16677,14028,12091,14741,14919,13973,13049], backgroundColor: "green" } ] }, options: { responsive: false, title: { display: true, text: 'Pyramide des ages' }, scales: { xAxes: [{stacked: true,}], yAxes: [{stacked: true }] }, } }); </script> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptが実装できない
初めまして。 Google Maps APIを使ってwebページ上でgoogle mapsを表示させようと思い htmlファイルとjavascriptファイルを実装したのですがうまく動きません。 ソースコードは以下の通りです。 googlemaps.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.0"); </script> <script type="text/javascript" src="googlemaps.js"></script> <title>指定した位置を中心とする地図</title> </head> <body> <p> 緯度<input id="lat" type="text" value="35.632997" /> 経度<input id="lng" type="text" value="139.648609" /> <button id="button">地図を作る</button> </p> <div id="map_canvas" style="width: 100%; height: 90%;"></div> </body> </html> googlemaps.js $(document).ready(function() { $("#button").click(function() { // input要素の値を取得し、マップの中心を決める var lat = $("#lat").val(); var lng = $("#lng").val(); var myCenter = new google.maps.LatLng(lat, lng); // 地図のオプション var myOptions = { zoom : 14, center : myCenter, mapTypeId : google.maps.MapTypeId.ROADMAP // 必須 }; // 地図の生成 var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // マーカーの生成 new google.maps.Marker( { position : myCenter, map : myMap, title : "Hello World!" }); }); }); firebugはgooglemaps.js 404 not foundといっているのでhtmlとjavascriptの連携が うまくいってないのだと思うのですが、どうすればいいのかわからず前にすすめません。 お詳しい方、ご教授ください。
- ベストアンサー
- JavaScript
- 複数canvasを表示状態のまま一つの画像に
先だってchart.js4.2でカラー設定をする方法(https://okwave.jp/qa/q10117946.html)で複数グラフを上1、下3できれいに配置する方法を教えてもらいました。そのコードに今まで2.9系で上下2個づつの配置表示したものを一つの画像にする下記のコードを加え試しましたが使えませんでした。 function imageDownload() { var chartWidth = 350; var chartHeight = 242; var imageType = "image/png" var imageFileName = "chart.png"; var bufferCanvas = document.createElement("canvas") bufferCanvas.width = chartWidth * 1.82; bufferCanvas.height = chartHeight * 2.2; bufferCanvas.style.display = "none"; document.body.appendChild(bufferCanvas); var ctx = bufferCanvas.getContext("2d"); // 背景色を設定（しない場合は透過） ctx.fillStyle = "rgb(255, 255, 255)"; ctx.fillRect(0, 0, bufferCanvas.width, bufferCanvas.height); // グラフを貼り付け for (i = 1; i <= 4; i++) { ctx.drawImage( document.getElementById("myChart" + i), i % 2 == 1 ? 0 : chartWidth, i <= 2 ? 0 : chartHeight ); } var imageURL = bufferCanvas.toDataURL(imageType); そこで、スタイル設定のボックスを無くし下記のように配置するようにしました。 <div class="row" style="width:100%;" > <div class="chart1" style="position: relative; top: 0; right: 0; left: 0; margin:0;" >c <canvas id="myChart1" width="400px" height="230px"></canvas></div> <div class="chart2" style="position: absolute; top: 300px; right: 0; left: 0; margin:0;" > <canvas id="myChart2" width="210px" height="210px"></canvas></div> <div class="chart3" style="position: absolute; top: 300px; right: 0; left:215px; margin:0;"> <canvas id="myChart3" width="210px" height="210px"></canvas></div> <div class="chart4" style="position: absolute; top: 300px; right: 0; left:430px; margin:0;"> <canvas id="myChart4" width="210px" height="210px"></canvas></div> </div> しかしながらこの画像化コードでは上下に2個配置するようになっているため大きさの違う上のグラフと下の最初のグラフが左右に一部重なって描画される結果となりました。 そこで、任意の配置状態を保ったまま一つの画像とする方法をお教えください。
- 締切済み
- JavaScript
- JavaScriptについて
本を読みながら勉強しているのですが解説が乗っていなくてわからない部分があるので教えてください <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=3.0"> <script src="plugins/plugin-loader.js"></script> <link rel="stylesheet" href="plugins/plugin-loader.css"> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); //ランダムに５０個多角形の表示 for (var i = 0; i < 50; i++) { randomDraw(); } //指定範囲のランダムな整数を返す関数 function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; } //ランダムに多角形を描画する関数 function randomDraw() { //パス指定 ctx.beginPath(); //点をランダムに決定 var n = randomI(2,7); ctx.moveTo(randomI(0,canvas.width),randomI(0,canvas.hright)); for (var i = 0; i < n; i++) { ctx.lineTo(randomI(0,canvas.width),randomI(0,canvas.height)); } ctx.closePath(); //描画 ctx.fillStyle = "#" + randomI(0,0xFFFFFF).toString(16); ctx.fill(); } </script> </body> </html> というコードでランダムに50個多角形を描画するというものです function randomI(nFrom,nTo) { var f = nTo - nFrom + 1; return Math.floor(Math.random() * f) + nFrom; ここのrandomIとnToとnFromというのは変数名ですか？これはいったい何者ですか？ var n = randomI(2,7); ここの数字を変更すると何かが変わるのですがうまく言葉にできません 何がどう変わるのか教えてください
- ベストアンサー
- JavaScript
- chartjsでグラフを選択制にしたい
chartjsで折れ線グラフを作成しています。 凡例をクリックするとグラフが表示・非表示と切り替わるように、セレクトボックスの選択で表示・非表示を切り替えたいです。 ご教授ください。 よろしくお願いいたします。 下記、現在のコードです。 HTML <select multiple="multiple" name="accessCount" class="select-block" title="アクセス数"> <option value="0">サンプル１</option> <option value="1">サンプル２</option> <option value="2">サンプル３</option> <option value="3">サンプル４</option> </select> <canvas id="chart-line" style="max-width: none"></canvas> js ※文字数上、datasetsの諸々の設定は省略してあります。 var data = { labelsY: ["01\/28 12:00","01\/29 00:00","12:00","01\/30 00:00","12:00"], sample1: [2,0,0,0,0], sample2: [1,0,0,0,0], sample3: false, sample4: false }; var lineData = { labels : data.labelsY, datasets: [ { label: "サンプル１", data: data.sample1, yAxisID: "leftNumberOfPeopleYaxis" }, { label: "サンプル２", data: data.sample2, yAxisID: "leftNumberOfPeopleYaxis" }, { label: "サンプル３", data: data.sample3, yAxisID: "leftNumberOfPeopleYaxis" }, { label: "サンプル４", data: data.sample4, yAxisID: "leftNumberOfPeopleYaxis" }, ], }; var ctx2 = document.getElementById("chart-line").getContext("2d"); var myLineChart = new Chart(ctx2,{ type: 'line', data: lineData, options: { legend: { display: false } }, scales: { xAxes: [ { ticks: { autoSkip: false, } } ], yAxes: [ { id: 'leftNumberOfPeopleYaxis', type: 'linear', position: 'left', scaleLabel: { display: true, labelString: 'アクセス数', }, ticks: { beginAtZero: true, callback: function(value) {if (value % 1 === 0) {return value;}} } }, { id: 'rightTimeYaxis', type: 'linear', position: 'right', scaleLabel: { display: true, labelString: '待機時間', }, ticks: { beginAtZero: true, callback: function(value) {if (value % 1 === 0) {return value;}} } }, ] } } });
- 締切済み
- JavaScript
- chart.jsの多重円グラフで系列表示について
chart.jsを使いグラフを作る方法を最近学び始めたものです。基本的なものはなんとなく出来たのですが、今回多重円グラフに作るための系列の設定につて行き詰まっています。下記のコードで多重円は出来たのですが、系列を凡例として表示させる方法がわかりません。 <script> var ctx = document.getElementById("myPieChart"); var myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['1月','2月','3月','4月','5月','6月','7月'], datasets: [ {label:'仙台' ,data: [320000,590000,400000,420000,380000,250000,420000],}, {label:'札幌' ,data: [520000,450000,380000,280000,590000,400000,530000],}, {label:'渋谷' ,data: [650000,230000,480000,600000,620000,700000,760000],}, ] }, options: { title: { display: true, text:'' }, legend: { // 凡例 display: true, // 表示の有無 position: 'top' // 表示位置 } }, plugins: { colorschemes: { scheme: 'office.Red6' } } }); </script> 1月、2月等は凡例として上部に出ているのですが、仙台、札幌等の系列名を同様に出しクリックで円を消したり表示したりするようにしたいのです。系列名だけ表示されていてこれが出来るサンプルがあったのですがコードまでの説明がありませんでした。 多重円の中から任意の円を非表示、表示させるコードをご教授願います。
- ベストアンサー
- JavaScript
お礼
再度丁寧な回答をいただき有難う御座います。取り消し線については、私もあるサイトで記されたものがあったので訳も分からないまま使い動作の確認までできたのですが。如何せんこのQ&Aサイトには連続して追加の補足や質問ができないので後の祭りでした。今回の件の他でも関連ページが異なりますがこの参考先のサイトを見ていますが、よく理解できないのが現状です。だからつい直接的表現のサイトから理解もせずコードをコピペしています。これからも何かありましたら宜しくお願いいたします。