matter.jsについて教えてください。| OKWAVE

matter.jsのイベントについて教えてください

いろいろなサイトのサンプルコードを参考にさせていただきながら、matter.jsを使って物理エンジンでの表現を勉強してます。なんとか、20個のボールを生成し、それぞれにラベルで番号をふりました。そのボそのボールをクリックして、どのボールをタッチしたのかをalertで表示させようとしているのですが、以下のコードでうまくいきません。どのようにすればよいでしょうか？ <!doctype html> <html> <head> <meta charset="utf-8"> <title>matter.js demo</title> <script src="matter.js"></script> </head> <body> <div id="matter"></div> <script> const engWidth = 680; const engHeight = 400; const wall = 10; const ball = 20; var ballSize = 20; var objs = []; var engine = Matter.Engine.create(document.getElementById("matter"), { render: { options: { wireframes: false, width: engWidth, height: engHeight, background: "rgba(0, 0, 0, 1)" } } }); objs.push(Matter.Bodies.rectangle(engWidth/2, wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth-wall/2, engHeight/2, wall, engHeight, {isStatic: true})); objs.push(Matter.Bodies.rectangle(engWidth/2, engHeight-wall/2, engWidth, wall, {isStatic: true})); objs.push(Matter.Bodies.rectangle(wall/2, engHeight/2, wall, engHeight, {isStatic: true})); for (var i = 0; i < ball; i++) { var x = Math.random()*engWidth; var y = Math.random()*engHeight; // ボールに番号のラベルをつける objs.push(Matter.Bodies.circle(x, y, ballSize, { label: i, render:{ fillStyle: "#FFFFFF", } })); } Matter.World.add(engine.world, objs); var MouseConstraint = Matter.MouseConstraint; // マウスドラッグではなく、マウスクリックのイベントを設定する var mouseclick = MouseConstraint.create(engine, { element: document.getElementById("matter").childNodes[0], constraint: { stiffness: 0.2, render: { visible: false } } }); Matter.World.add(engine.world, mouseclick); // マウスクリックしたボールの番号をalertで表示する Matter.Events.on(mouseclick, 'mousedown', function(e) { alert("You clicked on ball number " + e.body.label); }); Matter.Engine.run(engine); </script> </body> </html>

matter.jsのテクスチャーについての質問

matter.jsを学び始め、 matter.jsの基本的な機能を使ったサンプル集 https://mmsrtech.com/entry/2022/10/16/210254 このサイトのサンプルを参考にさせていただき、勉強しています。サンプルの中のオブジェクトの表示切り替え、削除、総数のカウントのコードを触りながらいろいろ試しています。サンプルの2か所を変更して、クリックで生成される円の半径を１５に固定して、テクスチャーを張ろうとしてるのですが、テクスチャーが貼れません。何も反応しなくなります。どのようにすれば、テクスチャーが貼れますか？ // 使用モジュール const Engine = Matter.Engine, Render = Matter.Render, Runner = Matter.Runner, Body = Matter.Body, Bodies = Matter.Bodies, Composite = Matter.Composite, Composites = Matter.Composites, Vector = Matter.Vector, Constraint = Matter.Constraint, MouseConstraint = Matter.MouseConstraint, Mouse = Matter.Mouse, Events = Matter.Events; // エンジンの生成 const engine = Engine.create(); // 物理演算canvasを挿入する要素 const canvas = $('#canvas-area')[0]; // レンダリングの設定 const render = Render.create({ element: canvas, engine: engine, options: { width: 800, height: 600, } }); // マウス、マウス制約を生成 const mouse = Mouse.create(canvas); const mouseConstraint = MouseConstraint.create(engine, { mouse: mouse, constraint: { render: { visible: false } } }) Composite.add(engine.world, mouseConstraint) render.mouse = mouse // レンダリングを実行 Render.run(render); // エンジンを実行 Runner.run(engine); /** * 以下、各例毎に処理を記述する */ $('body').append('<p class="body-counter">Number of balls : <span></span></p>'); $('body').append('<button>Clear</button>'); // ボール用Compositeを生成する【⑬】 const ballComposite = Composite.create(); Composite.add(engine.world, ballComposite); // 静止オブジェクト（空中の床と画面外落下判定オブジェクト）【⑭】 const floor = Bodies.rectangle(400, 400, 500, 30, { isStatic: true }); const pit = Bodies.rectangle(400, 900, 50000, 30, { isStatic: true, label: 'pit' }); Composite.add(engine.world, [floor, pit]); // クリックした位置に円を生成とballCompositeへの追加 Events.on(mouseConstraint, 'mousedown', e => { // ドラッグ中は生成しない if (mouseConstraint.body) { return } // 半径はランダム（10〜30） //const min = 10; //const max = 30; //ここを変更/////////////////////////////////////////////////////////////// const radius = 15; ///////////////////////////////////////////////////////////////////////////// const ball = Bodies.circle( e.mouse.position.x, e.mouse.position.y, radius, { restitution: 0.5 }, //ここを変更//////////////////////////////////////////////////////////// render: { sprite: { texture: 'img/ball.png'}} ////////////////////////////////////////////////////////////////////////// ); Composite.add(ballComposite, ball); }); // Engineモジュールに対するイベント/衝突の発生を検知する【⑮】 Events.on(engine, 'collisionStart', e => { $.each(e.pairs, (i, pair) => { // 画面外落下判定オブジェクトに衝突したボールを削除する if (pair.bodyA.label === 'pit') { Composite.remove(ballComposite, pair.bodyB); } }) }); // Compositeへのオブジェクト追加を検知してボール総数の表示を更新する【⑯】 Events.on(ballComposite, 'afterAdd', e => { // Eventオブジェクトを直接参照してCompositeに含まれる全bodyを取得 $('p.body-counter span').text(e.source.bodies.length); }); // Compositeからのオブジェクト削除を検知してボール総数の表示を更新する【⑯】 Events.on(ballComposite, 'afterRemove', () => { // Composite#allBodies()を利用してCompositeに含まれる全bodyを取得 $('p.body-counter span').text(Composite.allBodies(ballComposite).length); }); $('button').on('click', () => { // ボールを一括削除する【⑰】 Composite.clear(ballComposite); $('p.body-counter span').text(0); })

外部 .js で動かないものが出てきてしまいました

外部 .js への移行に伴い、動かないものがあります。エラは「未定義の変数です: rollover」、および「スクリプトで呼び出しているソースが見つかりません。」。 test.html、test.js、および画像はすべて同じディレクトリに置いています。 (test.js) window.onload = function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } または function loadImage() { var rollover = new Array(3); for (var i = 0; i < 3 ; i++) { rollover[i] = new Image(); } rollover[0].src = "image-1-x.gif"; rollover[1].src = "image-2-x.gif"; rollover[2].src = "image-3-x.gif"; } window.onload = loadImage; (test.html) <html> <head> <script type="text/javascript" src="test.js"></script> </head> <body> <a onmouseover="image-1.src=rollover[0].src; return true;" onmouseout="image-1.src='image-1-y.gif'; return true;" href="page-1.htm"><img name="image-1" src="image-1-y.gif" alt="Page 1"></img></a> <a onmouseover="image-2.src=rollover[1].src; return true;" onmouseout="image-2.src='image-2-y.gif'; return true;" href="page-2.htm"><img name="image-2" src="image-2-y.gif" alt="Page 2"></img></a> <a onmouseover="image-3.src=rollover[2].src; return true;" onmouseout="image-3.src='image-3-y.gif'; return true;" href="page-3.htm"><img name="image-3" src="image-3-y.gif" alt="Page 3"></img></a> </body> </html>

このJavaScriptソースを解説して下さい

JavaScript勉強中です。とあるサイトのソースの一部なのですが何が書いてあるのかわかりません。どなたか解説してください。 ----------ソースここから---------- <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-23877599-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> ----------ソースここまで---------- 全体的にわからないのですが、1行目だけでも教えてください。 var宣言で、論理和？(||)が使われてて、さらに配列？らしき括弧が続いてます。これはなんという構文なのですか？

Google Analytics　トラッキングコードについて

Google Analytics　トラッキングコードについてホームページのhead部分にこのスクリプトを埋め込んでくださいとありますが、外部のJavaScriptに埋め込む方法はないでしょうか？外部のファイルにコピペしてみたのですがトラッキングコードを認識できませんでした。 <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18744062-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script>

Google feed API の外部jsファイル化

Google feed API をつかって、 rssリーダーを作って実験しているのですが、以下のjavascript部分を外部jsファイルすると、動作しなくなってしまい困っています。 javascriptには、外部js化が出来るものと出来ないものがあるのでしょうか？どなたかご教授おねがいいたします。 <script type="text/javascript"> function load() { var feed = [ {title:'xxx', url:'http://xxx.com'} ]; var options = { numResults : 3, stacked : true, displayTime : 7000, fadeOutTime : 500, linkTarget : google.feeds.LINK_TARGET_BLANK } new GFdynamicFeedControl(feed, "feedControl", options); } google.load("feeds", "1"); google.setOnLoadCallback(load); </script>

chart.js4.2でマウスオーバー情報の変更

char.js4.2.1で下記のコードを使い人口ピラミッドを作ることは出来たのですがマウスオーバー時に 80～84歳 ■男: -14,805 の形で表示されますがこの数値を絶対値で処理する方法をお教えください。 <script> var ctx = document.getElementById("myBarChart").getContext('2d'); var 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' }] }; var options = { indexAxis: 'y', scales: { y:{ beginAtZero: true, stacked: true, display: true, title:{ display: true, text: '年齢' } }, x:{ stacked: true, display: true, //min: 300, title:{ display: true, text: '人数' }, ticks: { callback: function (v) { return Math.abs(v) } } }, }, plugins: { title: { display: true, text: 'Pyramide des ages' } } }; var ex_chart = new Chart(ctx, { type: 'bar', data: data, options: options, }); </script>

iがクリックごとに増えるようにしたい

二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、うまくいきません var firstClick = true; const startBtn = document.getElementById('js'); startBtn.addEventListener('click', ()=> { if(firstClick) { var i = 0; var firstClick = false; } ~ var firstClick = true;をグローバルに移動してみましたが今度はなぜかundefinedになってしまいます。なぜイベントリスナー外に出すとundefinedになってしまうのでしょうか？ trueを0にしてもやはりundefinedになってしまいます。またiは繰り返し増えていく数値全般に使うので、同じ変数名が多用されてどうしても被ってしまうのですが、現場ではどう対処しますか？ cssだとbemを使って対処しますが。 jsでもtimerI,timer-iなどにするのでしょうか？

このソースはJavaScriptですか？

Webサイトの作成のためにJavascriptやJQueryについて勉強しようと思っており、いろんなサイトを調べてみたら、次のようなソースが書かれていることが多いです。 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-746118-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); たぶんJavaScriptかJQueryだと思いますが、これは一体どのような命令文なのでしょうか？このソースを多くのサイトで使っているのならば、私も試してみたいと思っております。初心者ですが、宜しくお願い致します！！

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>

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 のエラーメッセージが出てグラフも左右でなく上下の状態となります。コピペだけで既存のコードを利用している者として不勉強で申し訳ありませんがご教授お願いいたします。

読み込み後発動するjsを他のjsに連携させたい

javascriptを使ってiPhoneアプリを作っています。サーバー側のmysqlと交信させるようにしているのですが、下記のように単純にpostすると、post後に表示されるのはサーバー側のhoge.ne.jp/usr_in.phpです。【iphone側　index.html】 <script type="text/javascript" src="js/jquery.js"></script> <form name="form1" id="form1" method="POST" name="form1" action="https://hoge.ne.jp/usr_in.php"> <input type=“hidden” name="myname" value="" /> <input type="hidden" name="pass" value="" /> <button class="button8">購入</button> </form> そこで、下記のような【遷移JS】を用い、ボタンを押すと、サーバー側にpostしたあと、【iphone側のfinish.html】に遷移するようにしました。ここまではうまくいきました。【遷移JS】 <script type="text/javascript" src="js/jquery.js"></script> <script> jQuery(function($) { $('#form1').submit(function(event) { // HTMLでの送信をキャンセル event.preventDefault(); // 操作対象のフォーム要素を取得 var $form = $(this); // 送信ボタンを取得 // （後で使う: 二重送信を防止する。） var $button = $form.find('button'); // 送信 $.ajax({ url: $form.attr('action'), type: $form.attr('method'), data: $form.serialize() + '&delay=1', // （デモ用に入力値をちょいと操作します） timeout: 10000, // 単位はミリ秒 // 送信前 beforeSend: function(xhr, settings) { // ボタンを無効化し、二重送信を防止 $button.attr('disabled', true); }, // 応答後 complete: function(xhr, textStatus) { // ボタンを有効化し、再送信を許可 $button.attr('disabled', false); }, // 通信成功時の処理 success: function(result, textStatus, xhr) { // 入力値を初期化 $form[0].reset(); // location.href = "finish.html"; // }, // 通信失敗時の処理 error: function(xhr, textStatus, error) { alert('購入できませんでした。再度お試しください'); } }); }); }); </script> <form name="form1" id="form1" method="POST" name="form1" action="https://hoge.ne.jp/usr_in.php"> <input type=“hidden” name="myname" value="" /> <input type="hidden" name="pass" value="" /> <button class="button8">登録</button> </form> 次に、このmysqlへの会員登録機能を自動化するために、読み込み後に自動的にsubmitされる【自動実行JS】を組み、<body onLoad="loadHello()"></body>で囲んだ後、<form></form>の最底辺に挿入しました。【自動実行JS】 <SCRIPT language="JavaScript"> function loadHello(){ document.form1.submit(); } </script> 結果、自動登録機能は機能するのですが、サーバー側のhoge.ne.jp/usr_in.phpが表示されてしまい、【iphone側のfinish.html】に遷移してくれません。 bodyをloadした後、【自動実行JS】が実行された時に、【遷移JS】にトスされずにそのまま送信されてしまうようです。どこをどう修正すればいいかご教授願います。

IEのみjqoueryスライダーが動かない

いつもお世話になっています。 Wordpressでサイトを構築しています。 firefoxやsafariでは動作確認がとれいていますがieのみ動きません。なぜでしょうか？ <script src="/js/jquery-1.6.2.min.js"></script> <script src="/js/jquery.easing.1.3.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <?php wp_head(); ?> <script type="text/javascript"> $(function(){ var slider = $('#slider8').bxSlider({ auto: true, pager: true, speed: 1000, controls: true, }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); jQuery(function() { var topBtn = jQuery('.tothetopfixed'); //最初はボタンを隠す topBtn.hide(); //スクロールが100に達したらボタンを表示させる jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> よろしくお願いします。

iがクリックごとに増えるようにしたい

二度目からはvar i = 0;を行わずにiがクリックごとに増えるようにしたいのですが、うまくいきません var firstClick = true; const startBtn = document.getElementById('js'); startBtn.addEventListener('click', ()=> { if(firstClick) { var i = 0; firstClick = false; } ~ stageNumDefault の二度目クリック時に数値が増えていかずNaNになってしまいます。 https://codepen.io/anon/pen/VbPpby に再現しておきました。

外部ファイルの参照の仕方

現在、外部ファイルに記述されたプログラムを参照するコードを書いているのですが、うまく実行できません。以下のコードなのですが、書き方が間違っているようでしたら、教えてください。プログラムの内容としては、キューへの操作で、pushは値を格納、popは最小値を取り出す、peak最小値を参照する、という機能を提供しています。（外部ファイル：PriorityQueue.js） function PriorityQueue(){ var queue=[]; var queue2=[]; } PriorityQueue.prototype.push = function (value){ queue.push(value); queue.sort(); queue.sort(function(queue,queue2) { return queue-queue2; }); } PriorityQueue.prototype.pop = function(){ var pop=queue.shift(); return pop; } PriorityQueue.prototype.peak =function(){ var peak= queue.shift(); queue.push(peak); queue.sort(); queue.sort(function(queue,queue2) { return queue-queue2; }); return peak; } } 参照元ファイル： <html><head> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script src="PriorityQueue.js"></script> <script> var q = new PriorityQueue(); function doPush() { var val = document.driver.push.value; q.push(val); var log = document.getElementById("log"); log.innerHTML += "push(" + val + ")\n<br/>"; } function doPop() { var val = q.pop(); var log = document.getElementById("log"); log.innerHTML += "pop() -> " + val + "\n<br/>"; } function doPeek() { var val = q.peek(); var log = document.getElementById("log"); log.innerHTML += "peek() -> " + val + "\n<br/>"; } </script> </head><body> <form name="driver"> <input type="text" name="push"> <input type="button" value="Push" onclick="doPush();"> <br/> <td><input type="button" value="Pop" onclick="doPop();"> <br/> <td><input type="button" value="Peek" onclick="doPeek();"> </form> <span id="log"></span> </body></html>

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で設定出来ないかと思いましたが方法が分かりませんでしたのでこのようなコードをに成り果てました。また、カラースキーム組み合わせは別の手段を使って作りコピペしているのですがこれも貧弱なものですので、使えるプラグインがあればご教授お願いいたします。

twitterのプロフィールウィジェットの表示

半月前からでしょうか、ツイッターのプロフィールウィジェットが表示されません。私自身は、何も変えていないです。どうしたら表示されるでしょうか。 ---以下、ツイッター上で表示されるコード--- <script src="http://widgets.twimg.com/j/2/widget.js"></script> <script> new TWTR.Widget({ version: 2, type: 'profile', rpp: 5, interval: 5000, width: 250, height: 300, theme: { shell: { background: '#555555', color: '#ffffff' }, tweets: { background: '#000000', color: '#ffffff', links: '#4aed05' } }, features: { scrollbar: false, loop: false, live: true, hashtags: true, timestamp: true, avatars: false, behavior: 'all' } }).render().setUser('自分のＩＤ').start(); </script> ---終了---

スライドショーの再生ボタンがうまくいきません

https://okwave.jp/qa/q9320398.html の続きスライドショーの再生ボタンがうまくいきません一度止めてから再度再生を押しても再生が再開されません。何度も恐縮ですが理由がわかりますか？ var it; let iterative = ()=> { it = setTimeout(myChange , 5000); } iterative(); let stoppingNow; const pauseBtn = document.getElementById('js-pause-btn'); pauseBtn.addEventListener('click', ()=> { clearTimeout(it); let stoppingNow = true; }); const playBtn = document.getElementById('js-play-btn'); if(stoppingNow === true) { playBtn.addEventListener('click', ()=> { iterative(); stoppingNow = false; });

サムネイルにマウスオーバーでメイン画像が切替るjs

head内から外部jsにするとスクリプトが動作しません。

下記の「●htmlのhead内に書かれているスクリプト」を外部jsにしたく、 <script type ="text/javascript">  </script> 以外の部分をテキストファイルにペーストして外部jsにしたのですが、上手く動作しません。この場合、どうやったら外部jsとして動作させることができますでしょうか？どうかご教授下さいますよう、よろしくお願い致します。フォームタグは以下のようになっています。 <form method="POST" action="●●.cgi" name="f" onSubmit="return check()"> ●htmlのhead内に書かれているスクリプト <script type ="text/javascript">  </script>

matter.jsについて教えてください。

みんなの回答

関連するQ&A

matter.jsのイベントについて教えてください

matter.jsのテクスチャーについての質問

外部 .js で動かないものが出てきてしまいました

このJavaScriptソースを解説して下さい

Google Analytics　トラッキングコードについて

Google feed API の外部jsファイル化

chart.js4.2でマウスオーバー情報の変更

iがクリックごとに増えるようにしたい

このソースはJavaScriptですか？

chart.jsでx軸の表示値をカスタマズする方法

chart.jsのコードを2.9から4.2に変換

読み込み後発動するjsを他のjsに連携させたい

IEのみjqoueryスライダーが動かない

iがクリックごとに増えるようにしたい

外部ファイルの参照の仕方

chart.js4.2でカラー設定をする方法

twitterのプロフィールウィジェットの表示

スライドショーの再生ボタンがうまくいきません

サムネイルにマウスオーバーでメイン画像が切替るjs

head内から外部jsにするとスクリプトが動作しません。

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

matter.jsについて教えてください。

みんなの回答

関連するQ&A

matter.jsのイベントについて教えてください

matter.jsのテクスチャーについての質問

外部 .js で動かないものが出てきてしまいました

このJavaScriptソースを解説して下さい

Google Analytics トラッキングコードについて

Google feed API の外部jsファイル化

chart.js4.2でマウスオーバー情報の変更

iがクリックごとに増えるようにしたい

このソースはJavaScriptですか？

chart.jsでx軸の表示値をカスタマズする方法

chart.jsのコードを2.9から4.2に変換

読み込み後発動するjsを他のjsに連携させたい

IEのみjqoueryスライダーが動かない

iがクリックごとに増えるようにしたい

外部ファイルの参照の仕方

chart.js4.2でカラー設定をする方法

twitterのプロフィールウィジェットの表示

スライドショーの再生ボタンがうまくいきません

サムネイルにマウスオーバーでメイン画像が切替るjs

head内から外部jsにするとスクリプトが動作しません。

注目のQ&A

カテゴリ

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

専門家に質問してみよう

Google Analytics　トラッキングコードについて