JavaScript

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

  • Canvasを使わずに直角三角形を描画できますか？

    図のような図形の描画を、JavaScriptで描くには？ 条件は、 ・Vanilla JavaScriptのこと ・Canvasを不使用 ・ｓｖｇを不使用

  • グリースモンキーで

    グリースモンキーで https://dic.nicovideo.jp/a/%E7%A7%91%E5%AD%A6 の本文の文字リンクを消すスクリプトを教えてください

  • replace() メソッドで表を作れますか？

    HTMLの表(テーブル)は、 通常、table, th, td などのタグを用いて作成します。 私は、それに飽きてしまったので、それらのタグを使わずに replace() メソッドで表を作ることができました。 【HTML】 <pre class="table"> No. ARTIST SONG TITLE RELEASE 01 Ava Max Salt 2019 02 Sia Move Your Body 2016 03 Ken Laszlo Hey Hey Guy 1984 04 The Weeknd Save Your Tears 2020 05 Suri Media Thuong Ly Biet 2021 06 Charlie Thompson Changed My Mind 2013 </pre> 皆さんでしたら、どんなコーディングで実現できますか？ 【条件】 ・元データのセル間はタブ区切り ・createElement()を用いないこと ・メソッドチェーンは可読性が劣るので不可 　・CSSは用いずに、文字の太さ・セルの背景色も JavaScriptで設定

  • DIVタグ内のテキストをセレクトできますか？

    textareaタグ内のテキストは element.select(); で選択できます。 では、DIVタグ内のテキストの時は どのようにすればよいのでしょうか？

  • コード

    このコードのどこが間違っているんでしょうか　JavaScript

  • txtファイルを読み込んでWeb上で自動作表したい

    本日２月２０日は、西郷輝彦さんの命日です。 当方は、彼の歌が好きで、歌のリストを作りました。 このテキストファイルをHTMLで読み込んで、 Web上で自動作表したいと思っています。 条件は、次のとおりです。 ・ローカル環境でできること ・OBJECTタグ、または、IFRAMEタグに読み込む ・JavaScriptでコーディングする ・読み込むファイルの例は次のとおり 曲名　　　　　　　　　発売日　　 チャペルに続く白い道　1964.04.15 星空のあいつ　　　　　1964.06.01 潮風が吹きぬける町　　1967.10.01 JavaScriptに詳しいかたにご教示願いたく、 よろしくお願いいたします。

  • HackAllの攻略

    HackAll v2のレベル３は、自分のユーザーエージェントが正解ですが、ソースコードにはそれを照合するコードがありません。 レベル１と２は照合するコードがあります。 レベル３はどうやって照合していますか？ https://hackall.cipher.jp/

  • クリックして画像を表示JavaScriptについて

    友人がJavaScriptに苦戦しています。 ボタンをクリックすると、画像が表示されるプログラムを作りたいそうです。以下、送られて来たコードです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="box"><!--attr (DOMのsetAttributeと同じ)--> <script> addEventListener("load",()=>{ document.getElementById("btn").addEventListener("click",()=>{ //$("img").attr("src","./image.jpg"); document.getElementById("aa").style.color = "white"; document.getElementById("img").style.backgroundImage = "./image.jpg"; }); }); </script> <button id="btn">ここをクリックで画像表示</button> <p id="aa">aa</p> <img id="img"> </div> </body> </html> なぜかボタンをクリックしても、画像が表示されません。なぜなのでしょうか？教えて頂きたく思います。

    • ベストアンサー
    • noname#254329
    • JavaScript
    • 回答数1
  • Jqueryを使った特定語句の自動タグ付与について

    ### 前提 ワードプレス記事内の指定した特定語句にjQueryを使って自動で<span>タグとクラスを付与することによって自動で特定語句をハイライト（強調）しています。 このコードはjavascript.js内に記述しており全てのページに反映されます。 ### 実現したいこと ①類似した語句に自動で<span>タグを付与しないようにしたい（これは正直難しい） ②もっと簡単な方法で特定ページでは動作しないようにしたい ### 発生している問題・エラーメッセージ ①下記例の場合、 "トロ"という語句に<span>タグを付与している場合、 "トトロ"という語句がくると"トロ"だけ反応してしまい ト"トロ" のように意図せぬ場所でハイライトされてしまいます。 ②数百あるページのうち数ページはハイライトが不要なのですが javascript.jsに記述してある為、不要でも無効化することができません。 全ての個ページにそれぞれ記述すれば解決しますがハイライトが必要/不必要なページの比率的に現実的ではありません。 ``` ### 該当のソースコード jQuery().ready(function($) { $('p').each(function() { var txt = $(this).html(); $(this).html(txt .replace(/トロ/g,'<span class = "Ptext">トロ</span>') .replace(/サーモン/g,'<span class = "Ptext">サーモン</span>') .replace(/トト/g,'<span class = "Ptext2">トト</span>') ); }); }); ``` ### 試したこと ①クラス名は適当ですがこの場合、トロという語句に対してPtextで強調したい色やサイズでcssを指定します。 　次にトトロで反応しないようにトトという語句に対してPtext2で通常フォントを指定して他の語句も見つけ次第展開していきます。 ②ハイライト不要ページ内ではPtextを全てPtext2に書き換えて記述します。 よろしくお願いいたします。

  • 複数のスタンプ画像の選択肢をphpに送りたい

    質問ページを作成したいのですが、formを作る際にgoo質問のような1目でわかるリアクションスタンプを実装したいです。 質問文は<form></form>を使い実装可能だと考えたのですが、スタンプ画像を設置した状態でその中から選択肢を選ばせる方法が分かりません。Wordpressを使っているためAjaxのようなデータの送信ができない前提で作りたい場合、どのようなコードが必要になるのでしょうか？アドバイスお願い致します。 ※参考イメージ https://imgur.com/CjdK1Hf.gif ※参考サイト https://okwave.jp/qa/q8315548.html https://okwave.jp/qa/q8315548.html

  • 列車の走行位置プログラムを作りたいです。

    2022/12/28 13:23 自分は、列車の現在時刻をもとにアニメーションを描画するプログラミングを考案したいなぁと考えております。 以下のサイトを参照しています。 http://r113.web.fc2.com/p/viewer/nankai ... index.html 以下のサイトだと、平日ダイヤと土・休日ダイヤの割り振りしかできません。 フラグをいじってみてわかったことですが、これは、曜日単位で分けるものであり、 日付単位で分けることができません。 <code> //平日ダイヤか土・休日ダイヤかを判定する function dayJudge(year, month, date, day) { //alert(year +" "+ month +" "+ date +" "+ day) //フラグ var weekdayFlag = true; //月?金なら立てる if(day >= 1 && day <= 5) weekdayFlag = true; else weekdayFlag = false; //祝日ならたおす if(year == 2013 && month == 1 && date == 1) weekdayFlag = false; else if(year == 2013 && month == 10 && date == 14) weekdayFlag = false; return weekdayFlag; } </code> 自分は初歩的なプログラミングしかできませんが、 <code> //月?金なら立てる if(day >= 1 && day <= 5) weekdayFlag = true; else weekdayFlag = false; </code> の部分が、いわば、曜日で分かれるように設定してあることに気が付きました。 これを個別の日にち単位で分けるとしたら、どんなプログラムが考えられるでしょうか。 自分は3つ以上のダイヤパターンを考えたいです。

  • javascriptで歪度と尖度を求めるコード

    サイトを参考に不偏分散から歪度と尖度を下記のコードで求めることが出来たのですが、 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8 > <title>unbiased_Variance</title> </head> <body> <script> const arr = [70,71,70,74,75,73,72] // 平均値を計算 let sum = 0; arr.forEach((x, i) => sum += x) const ave = sum / arr.length; // 分散を計算 let dist = 0; arr.forEach((x, i) => dist += (x - ave) ** 2) const unbiasedVariance = dist / (arr.length-1); //不偏分散 const SD = Math.sqrt(dist / (arr.length-1)); // 歪度と尖度を計算 let sum3 = 0; let sum4 = 0; for (var i in arr){ sum3 += Math.pow((arr[i] - ave)/SD, 3); sum4 += Math.pow((arr[i] - ave)/SD, 4); } const skew = sum3*arr.length/(arr.length-1)/(arr.length-2); const exKurt = arr.length*(arr.length+1)/(arr.length-1)/(arr.length-2)/(arr.length-3)*sum4 - 3*(arr.length-1)*(arr.length-1)/(arr.length-2)/(arr.length-3); console.log(unbiasedVariance); console.log(skew); console.log(exKurt); </script> </body> </html> javascriptはコピペで使用が主なので複雑な計算方法の書き方は分かりません、そこでこんな形のコピペのコードが出来上がりました。 配列から歪度と尖度を求めるコードをもっとすっきりした形になればと思い質問しました。もし宜しければご教授お願います。

  • javascriptの計算結果の出力について

    いつもお世話になっております。下記のjavascriputoで最頻値を求める場合結果はconsole.logに表示されますが、この結果をテキストかCSVのデータとして出力する方法をお教えください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset=utf-8 > <title>Array_mode</title> </head> <body> <script> var store = ['aa','bb','cc','dd','ee','bb','ee','cc','ee','aa','bb'], distribution = {}, max = 0, result = []; store.forEach(function (a) { distribution[a] = (distribution[a] || 0) + 1; if (distribution[a] > max) { max = distribution[a]; result = [a]; return; } if (distribution[a] === max) { result.push(a); } }); console.log('count: ' + max); console.log('mode: ' + JSON.stringify(result)); //console.log(distribution); </script> </body> </html>

  • jsのcase文では、～かつ～が使えないのはなぜ。

    jsのcase文では、～かつ～を使いたいです。 例えば、月曜日かつ火曜日としたいのですが、どこにもそのようなサイトが載っていないのです。 どうしてですか。なければ代替案を教えてください。

  • ショートカットキーの作り方

    Aキーを押したら関数を実行するが、textareaに文字を入力しているときは、関数を実行しない方法を教えください。

  • スクロールで画面が読み込まれたら動くようにしたい

    下記html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 素人なのでコピペで教えて欲しいです。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">テキスト</p> </div> <div> <p class="slide-up">テキスト</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }

  • スクロールで画面が読み込まれたら動くようにしたい

    html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">salon</p> </div> <div> <p class="slide-up">info</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }

  • 単独で開かれたiframeを親ページに表示したい

    ブログ記事(blog1.html、blog2.html、blog3.html)を親ページ(index.html)のiframeとして表示しています。 親ページを開いた際には、デフォルトで最も新しいブログblog3.htmlが表示されるようになっています。 ブログ記事が単独で開かれた場合には、 if (window == window.parent) { location.href = "./index.html"; により自動的に親ページに導くようにしていますが、その際に開かれたブログ記事を表示したいと思います。 当たり前ですが、現在はblog3が開かれてしまいます。 どのようにしたらいいでしょうか。 以下、現在確認中のサンプルスクリプトです。 ■親ページ■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> <p>index.html</p> <iframe src="./blog3.html" frameborder="2" width="300" height="100"></iframe> <div id="result"></div> </body> </html> ■ブログ1■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog1</title> </head> <body> <p>blog1.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html> ■ブログ3■ <html lang="ja"> <head> <meta charset="UTF-8"> <title>blog3</title> </head> <body> <p>blog3.html</p> <script> // 単独で開かれている場合 if (window == window.parent) { location.href = "./index.html"; // iframeで開かれている場合 } else { } </script> </body> </html>

  • jsでフラグ型をenum型に変えたい。

    以下のjavascript文があります。 [code] //平日ダイヤか土・休日ダイヤかを判定する function dayJudge(year, month, date, day) { //alert(year +" "+ month +" "+ date +" "+ day) //フラグ var weekdayFlag = true; //月?金なら立てる if(day >= 1 && day <= 5) weekdayFlag = day >= 1 && day <= 5; 　　else if(day==6) weekdayFlag2 = day == 6 else weekdayFlag = false; //祝日ならたおす if(year == 2013 && month == 1 && date == 1) weekdayFlag = false; else if(year == 2013 && month == 10 && date == 14) weekdayFlag = false; else if(year == 2015 && month == 3 && date == 21) weekdayFlag = false; return weekdayFlag; } [/code] をフラグ型から、enum型に変更できませんか。 フラグではAもしくはBといった２通りの回答しかございませんので、 ３つめの分岐は作ることはシステム上無理なのです。 enum型なら、パターンはある程度余裕（無限じゃないかも）をもたせることできるからです。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

カテゴリ