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

前へ 次へ
このQ&Aのポイント
  • chart.jsで水平横棒グラフ使ったピラミッドチャートのx軸の片方の系列の値をカスタマイズする方法について教えてください。
  • ticksのコールバックを定義して、左右違う系列の場合でも左側の値を＋表示に変更することが可能です。
  • コード内の男性のデータを＋表示に変更する方法について教えてください。
回答を見る
  • ベストアンサー

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>

質問者が選んだベストアンサー

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

xAxesのticksオプションのcallbackを下記のように指定すると、X軸を中央から両側に向かって増加するようにできます。 xAxes: [{ stacked: true, ticks: { callback: function (v){ return Math.abs(v) } } }] 仕組みとしては単純で、軸のすべての値を絶対値として置き換えています。

turu575
質問者

お礼

早速の回答ありがとうありがとうございます。なるほど複数系列の有無に関わらず絶対値を指定すればいいのか。系列毎に指定しなければいけないかと思っていた自分が情けない。 ついでに伺いますがy軸の表示部分を中心に左右に振り分ける方法についてですがExcelでは簡単に出来るのですがchart.jsでは左右別方向の水平棒グラフを並列に並べる等の面倒な方法をとらなければいけないでしょうか。

その他の回答 (1)

  • Proof4
  • ベストアンサー率78% (151/192)
回答No.2

No.1のお礼コメントに対して回答します。 y軸の表示部分を中心（y軸を2つの系列の間に挟む感じ）にするのは1つの水平棒グラフでもできるかもしれませんが、複雑化してカスタマイズはしづらくなるように思います。棒の上に階級幅を表示するのであればできそうです。 棒グラフはあくまで0を起点に値を積み上げるため、各系列でその起点を分離したければ別々のグラフにするのが賢明です。2つの水平棒グラフを用いる場合でも共通する処理が多いため、その実装の方がかえってやりやすいのではないでしょうか。

turu575
質問者

お礼

いつも的確な回答有難う御座います。軸の表示エリアを任意の位置に指定できないかと思いましたが、ご指摘の 複雑化してカスタマイズはしづらくなる・・・別々のグラフにする・・・その実装の方がかえってやりやすい との事を踏まえ試してみたいと思います。なお他に何か良いアイデアがありましたら再度ご教授願います。

turu575
質問者

補足

お礼投稿した後でchart.jsのドキュメントに チャート内の軸の位置。 可能な値は以下のとおり 'top'、'left'、'bottom'、'right' とあることに気づきました。この通りならば上記の4通り以外の任意の位置を指定するのは無理みたいと思われます。余計な質問をして申し訳ありませんでした。

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

関連するQ&A

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

  • 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>

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

  • 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）の部分はカットしました。

  • 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月等は凡例として上部に出ているのですが、仙台、札幌等の系列名を同様に出しクリックで円を消したり表示したりするようにしたいのです。系列名だけ表示されていてこれが出来るサンプルがあったのですがコードまでの説明がありませんでした。 多重円の中から任意の円を非表示、表示させるコードをご教授願います。

  • chart.js4系で凡例をカスタマイズする方法

    今回、chart.jsの2系から4系に変更するにあたり下記の多重円のサンプルで以前から気になっていた系列を利用した凡例の■（以前は濃いグレー）を黒からそれぞれ任意の色に出来ないかと思い悩んでいましたが、米国のあるQ&Aサイトに載っていた方法（前に投稿しましたが削除済み）等試しましたがそこまでしなくても単にfontColorをreturn内で指定するだけで出来ました（下記コード）。 しかしこの方法でもボックス部分とテキストを含めた凡例全体の色が変わりました。今回はpinkで指定したところ、テキストの色がpinkでは見た目が鮮明とはいえません。やはり、テキストとボックス部分で別の色の出来ないかと思いまして、何か解決方法があればお教えください。 <script> const CHART_COLORS = {'赤': 'rgb(230,0,18)','プラム': 'rgb(221,160,221)','マゼンタ': 'rgb(228,0,127)','スカイブルー': 'rgb(160,216,239)','紫': 'rgb(146,7,131)','緑': 'rgb(0,153,68)','ゴールド': 'rgb(255, 215, 0)' }; const ctx = document.getElementById("myPieChart"); const myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['Jan','Feb','Mar','Apr','May','June'], // Ｘ軸のラベル datasets: [ { label: 'NY', data: [32, 59, 40, 42, 38, 25],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}, { label: 'LA', data: [52, 45, 38, 28, 59, 40],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false}, { label: 'CHI', data: [65, 23, 48, 60, 62, 70],backgroundColor: Object.values(CHART_COLORS), tension: 2,fill: false} ] }, options: { responsive: false, // canvasサイズ自動設定機能を使わない。HTMLで指定したサイズに固定 plugins: { legend: { // 凡例 display: true, // 表示の有無 position: 'bottom', // 表示位置 labels: { generateLabels: function(chart) { return chart.data.datasets.map(function(datasets, i) { return { fontColor: 'pink', //凡例の色を指定 datasetIndex: i, text: datasets.label, fillStyle: datasets.backgroundColor, strokeStyle: datasets.borderColor, // 表示状態に連動して取り消し線表示 hidden: !chart.isDatasetVisible(i), }; }); } }, onClick: function(e, legendItem){ const index = legendItem.datasetIndex; const ci = this.chart; const meta = ci.getDatasetMeta(index); meta.hidden = meta.hidden === null ? !ci.data.datasets[index].hidden : null; ci.update(); } } } } }); </script> さらに欲を言えば「labels: ['Jan','Feb', 」等を使ったデフォルトの凡例も別位置に配置出来ないかと考えています。なお、デフォルト凡例と <button・・でで作った凡例の両方操作できる方法は、このサイトで以前(https://okwave.jp/qa/q9820330.html)教えてもらっています。 どうかよろしくお願いいたします。 また、同じような内容で投稿、削除を繰り返し行っていることお許しください。

  • HTML5のcanvasで描画がされない

    HTML5のcanvas要素を使って描画をしようとしたのですが、図形が表示されません。 コードは以下の通りです。 ・index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く</title> <script type="text/javascript" src="paint.js"></script> </head> <body onLoad="draw()"> <canvas id="mycanvas"width="800" height"800"> </canvas> </body> </html> ・paint.js function draw() { //描画コンテキストの取得 var canvas = document.getElementById('mycanvas'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.arc(180,150,20,Math.PI*1,Math.PI*2,true); } } このコードでは(180,150)の位置に半径20の円が描画されるはずなのですが、何も表示されませんでした。 どこかコードに誤りがあるのでしょうか？ よろしくお願いします。

  • 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>

  • ２つの図を重ねて表示したい

    HTMLもJavaScriptも初心者です。 *.png の図と canvas に書いた図を重ねて表示したいのですが、canvas に書いた図が *.png に隠れて表示されません。 コーディングは次のとおりです。 <html> <title>figures</title> <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> </head> <body> <div id=lyrwall style="position:absolute; left:20px; top:20px;"> <img src=figure.png> </div> <canvas id="canvassample" width="500" height="500"> <script type="text/javascript"> onload = function() { draw(); }; function draw() { var canvas = document.getElementById('canvassample'); if ( ! canvas || ! canvas.getContext ) { return false; } /* 2Dコンテキスト */ var ctx = canvas.getContext('2d'); /* 線を引く */ ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(480, 480); ctx.stroke(); } </script> </canvas> </body> </html> 直線のうち、figure.png と重なる部分が表示されません。表示されるようにするにはどうすればいいのでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 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>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する