【Monaca】D3.jsを使用したグラフの特定の軸の色を変更する D3.jsを使用した折れ線グラフです。 このままでは少し味気がないので、縦軸の土曜日を青・日曜日を赤・ボーダーラインとして横軸の500をオレンジに変更したいと思います。 Continue reading axis Cordova D3.js filter JavaScript LINE Monaca selectAll グラフ チャート 折れ線
【Monaca】D3.jsを使用したグラフに凡例を表示する 今回は、前回紹介した「【Monaca】D3.jsを使用してグラフに複数の折れ線を表示する」のコードに凡例を表示する処理を追加します。 otak-lab2020.06.18【Monaca】D3.jsを使用してグラフに複数の折れ線を表示するhttps://otak-lab.com/archives/3394今回は、前回紹介した「【Monaca】D3.jsを使用して折れ線グラフを表示する」のコードを流用し、グラフに複数の折れ線を表示する方法について紹介します。日経平均の高値と安値を折れ線グラフに表示します。Monacaデバッガーの結果です。まず、2次元配列を以下のように変更します。app.js"use strict";ons.ready(function () { var data = , , , , , , , , , , , , , ]; window.fn.chart.createLineChart("chart", data);});CSSに以下のコードを追加します。style.css.... Continue reading Cordova D3.js JavaScript LINE Monaca selectAll グラフ チャート 凡例 折れ線
【Monaca】D3.jsを使用してグラフに複数の折れ線を表示する 今回は、前回紹介した「【Monaca】D3.jsを使用して折れ線グラフを表示する」のコードを流用し、グラフに複数の折れ線を表示する方法について紹介します。 otak-lab2020.06.16【Monaca】D3.jsを使用して折れ線グラフを表示するhttps://otak-lab.com/archives/3376私が開発したアプリの折れ線グラフは、すべてD3.jsを使用しています。「どうやって折れ線グラフを表示しているのか」など問い合わせが多いため、今回はコピー&ペーストすればアプリに使える、折れ線グラフを表示する方法について紹介します。d3.min.jsをフォルダにアップロードしてください。2次元配列dataに年月日と数値を設定し、window.fn.chart.createLineChart("chart", data)を実行すれば、折れ線グラフが表示されます。※見た目が少し変わるように、Google Fontsを使用しています。Monacaデバッガーの結果です。iOS版... Continue reading Cordova D3.js JavaScript LINE Monaca selectAll グラフ チャート 折れ線