ishii-akihiro’s blog

いろいろ試したことやバグ対応の作業履歴を残していきます。

javaScript

西暦と和暦の表示を切り替えるラジオボタンを設置する

概要 システム開発において、整数の連番である西暦は扱いやすいです。しかし、元号も令和になりましたし、日本人の感覚としては和暦の方が捉えやすいことも多いです。 消費税の導入やベルリンの壁が崩壊したのは平成元年です。1989年と言われるより印象に残…

Chart.jsのグラフをボタン押下時に更新する

概要 縦軸が金額になるグラフを作っていて、単位を千円とか百万円とかに切り替えるボタンが欲しくなりました。両方作って表示すればいいのですが、Chart.jsの学習がてらやってみました。 作成したサンプル 更新ボタンを押す度にAの値が2倍になるグラフです。…

Chart.jsの描画処理を関数で共通化して、データセットを引数にする

/img{ border: 1px solid #000; width: 50%; }/ 概要 Chart.jsで同じページに複数の箇所にグラフを描画したいとき、Optionsが同じであればグラフごとに描画処理を書くと冗長になります。 そこで、描画処理を関数で共通化して、データセットは引数として渡し…

chart.jsでグラフの横軸を円周率単位の表示にする

概要 chart.jsで三角関数(sin x,cos x)のグラフを描くときに、横軸のラベルを 0, 1, 2, 3, ... ではなく 0, 0.25π, 0.5π, 0.75π ... と表示したかったので試してみました。 結果のイメージ 横軸をπ/4ずつ表示します。 結果のイメージ コード chart.jsの基本…

Chart.js で canvas 要素にグラフが表示されない

概要 Chart.js で 2箇所の <canvas> 要素にグラフを描画しようとしたけど、 どちらも表示されない。。 ちなみに、<button type="button"> 要素をクリックしたときに描画したい。 バージョン Chart.js 2.1.4 原因と対策方法 jsファイルではなく、htmlファイルに原因がありました。 block要素</button></canvas>…

動的にMathJaxを適用する

概要 ユーザが画面に入力したパラメータに応じた数式を表示し、 表示する数式にはMathJaxを適用してTeXっぽくします。 動的に変化させる数式はJavaScriptを利用して作成しますが、 うまくMathJax が適用されずハマったのでメモ。 環境 javaScript 5.0.4 jQue…

javaScriptで、Cannot POST 〇〇/index.html っていわれた

概要 html で作った formから submit した値を javaScript で操作して同じページに返そうと思ったら、 submitした後にCannot POST 〇〇/index.html っていわれた。 環境 AWS Cloud9 jquery 2.2.4 原因 form の属性で action="" としていたことにより、 存在…