VSCode + CordovaのエミュレータでChart.js使ってレーダーチャート表示しようとしたらエミュレータ上は表示されなくてハマったので使い方メモ
Chart.js使って格好良いレーダーチャートを描画しようとしたら、エミュレータでは表示されませんでした。
問題を切り分けないといけないので一旦Chromeブラウザで見てみると描画されています。
エミュレータだから表示されない、、と信じたいので実機で試してみました。
apkファイルを作成します。
cordova build --release
Andoroid7.1.1で試したのですがリリース版だとエラーとなったためdebugでapkを作成したら正常にインストールすることができました。
cordova build android
レーダーチャートも無事表示できました。ひょっとするとレーダーチャートがエミュレータ画面の範囲外に表示されていたのかな、という感じです。
やっぱり実機で試さないといけないと痛感しました。
Chart.jsのbar（棒グラフ）で縦線を引く
bar（棒グラフ）で縦線（基準線）を引くにはプラグインを作成して実現しました。
プラグインの作成方法・登録方法は以下のようにします。
var plugin = { /* plugin implementation */ }; // plugin作成
Chart.pluginService.register(plugin); // 作成したpluginを登録
radarチャートの目盛りの最大値と最小値と目盛り間隔を設定する
radarチャートはデフォルトで一番大きい値が目盛りの最大値となるようですが、メモリの最大値や最小値を指定することができます。
目盛り感覚はデフォルト20ですがこれも変更可能です。optionsに以下のように指定します。
レーダーチャートの場合はmaxを指定してもそれを超えるデータの場合はmaxを超えて表示されるようです。（公式サイトには、maxを超えるデータは上書きされるとありますが、、）
options: {
scale: { // scaleであることに注意
ticks: {
min: 0, // 最小値
max: 200, // 最大値
stepSize: 25 // 目盛の間隔
}
}
}
barチャートの目盛りの最大値と最小値と目盛間隔を設定する
barチャートでも目盛りの設定をすることが可能ですが、type（radarとかbar）によって設定方法が違います。
barチャートでの設定方法は以下のようにします。これはY軸の目盛りを設定した例です。
barチャートの場合はmaxを超えるデータの場合はきちんとmaxで上書きされるようです。
options: {
scales: { // scalesであることに注意
yAxes: [ // Y軸設定
{
ticks: { // 目盛り
min: 0, // 最小値
max: 200, // 最大値
stepSize: 25 // 軸間隔
}
}
]
}
}
ラベルが表示されない場合がある
ラベルの表示/非表示はデフォルトではアルゴリズムによる自動計算のようなので、必ず表示されるわけではないようです。以下を見てください。
autoSkip:falseを指定すると必ず表示されると書いてありますので（デフォルトはtrue）、X軸の設定を変更します。
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false
}
}
]
}
}
これで500%zoomしても必ず表示されるようになりました。気になるところはラベルが自動で斜めになってしまうところでしょうか。
ラベルの表示角度を指定する
ブラウザをズームしたりするとラベルが斜めになったりしてしまうので、これも指定しておきます。ここではX軸を90℃回転させています。
options: {
scales: {
xAxes: [
{
ticks: {
autoSkip: false,
minRotation: 90
}
}
]
}
}
maxRotationの指定はデフォルト90で、回転が必要になるまでは意味のない設定です。
barチャートで基準線を引く
こんなこと出来たらよいなと思って公式サイトを見てみましたが発見できず。Y軸に基準線みたいなラインを引いてみたいと思ってプラグインを作成してみました。詳細は開発者向けのページを参照ください。
プラグイン登録方法はさきほど記載した方法で記述します。
var LinePlugin = { // LinePluginを定義する
afterDraw: function(ci) {
var ctx = ci.chart.ctx;
var line;
if (ci.options.LinePlugin) {
for (var index = 0; index < ci.options.LinePlugin.length; index++) {
line = ci.options.LinePlugin[index];
yValue = ci.scales['y-axis-0'].getPixelForValue(line.yline);
ctx.lineWidth = 2; // 基準線の太さ
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(ci.chart.width, yValue);
ctx.strokeStyle = line.style;
ctx.stroke();
}
};
}
};
Chart.pluginService.register(LinePlugin); // LinePluginを登録する
var canvas = document.getElementById('myChart');
var ctx = canvas.getContext('2d');
var myChart = new Chart(ctx,{
type: bar,
data: // ～～省略
options: {
'LinePlugin': [{ // LinePluginの設定を記述（配列のオブジェクトなので複数定義が可能）
'yline': 100,
'style': 'rgba(255, 0, 100, .6)'
}]
}
});
レーダーチャートで基準線みたいなラインを引いてみる
今度はレーダーチャートで基準線を引いてみようかと思ったのですが、これはこれでbackgroundを透明にした固定データを引いてあげれば基準線みたいなのができあがります。
datasets: [
{
// 実際の値
},
{ // 基準線
label: "disabled",
data:
[100, 100, 100, 100, 100],
backgroundColor: [ // backgroundは透明にする
'rgba(255, 255, 255, .0)',
'rgba(255, 255, 255, .0)',
'rgba(255, 255, 255, .0)',
'rgba(255, 255, 255, .0)',
'rgba(255, 255, 255, .0)'
],
borderColor: [ // borderは適当に色を付ける
'rgba(255,99,132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)'
],
pointRadius: 0 // 点の形状は非表示にする
}
}
このままだと基準線のラベルが表示されてしまうので特定のラベルを非表示にします。
options: {
legend:{
labels:{
filter: function(items, chartData) {
return items.text != 'disabled'; // ラベルがdisabledのラベルを非表示にする
}
}
}
}
これでラベル名を指定して非表示にします、ただしデータは表示することができます。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント