2020-11-10

Share on:

11時

そらいきなり朝から鶴亀堂よ

その後

いけあでドーナツチャート書いてた

歯がガンガンいたいけど夜になったらおさまってきた、、、

chartjsでドーナツチャート

https://www.chartjs.org/docs/latest/charts/doughnut.html

今回の要件は非常に単純で、全体に対して何割かを出すというそれだけ。例えば10人に対して2人としましょうか。

チャートを描画するだけならこんな感じかなって気がします(jQueryを伴う書き方)

script部分

 1<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
 2<script>
 3var ctx = $('#myChart').get(0).getContext('2d');
 4var data = {
 5    datasets: [{
 6          backgroundColor: [
 7              "blue",
 8          ],
 9        data: [2, 8]
10    }],
11
12    // These labels appear in the legend and in the tooltips when hovering different arcs
13    labels: [
14        '完',
15        '未',
16    ]
17};
18var myDoughnutChart = new Chart(ctx, {
19    type: 'doughnut',
20    data: data,
21    options: {}
22});
23</script>

html

1<div style="width: 300px">
2  <canvas id="myChart"></canvas>
3</div>

htmlからデータを注入してみると

1<div style="width: 300px">
2  <canvas id="myChart" data-json="{{ json_encode([2,8]) }}"></canvas>
3</div>
 1var ctx = $('#myChart').get(0).getContext('2d');
 2var graphData = $('#myChart').data('json');
 3
 4var data = {
 5    datasets: [{
 6          backgroundColor: [
 7              "blue",
 8          ],
 9        data: graphData,
10    }],
11// ...

こんなのになるでしょう

今回の要件

これをいくつか出すとします。ま今回は4つくらい出してみる事にします。bladeで恐縮であります。

1@foreach(range(1,4) as $i)
2<div style="width: 300px">
3  <canvas id="myChart" data-json="{{ json_encode([2,8]) }}"></canvas>
4</div>
5@endforeach

この時点でまずidが4つ出てるのでおかしいぞって事になりやすね。これをclassに変更して

1@foreach(range(1,4) as $i)
2<div style="width: 300px">
3  <canvas class="myChart" data-json="{{ json_encode([2,8]) }}"></canvas>
4</div>
5@endforeach

jqueryではeachすればokってことになりやす。まあこの辺は何のハイライトもないっす。

 1$('.myChart').each(function(index, element){
 2    var ctx = $(this).get(0).getContext('2d');
 3    var graphData = $(this).data('json');
 4
 5    var data = {
 6      datasets: [{
 7          backgroundColor: [
 8              "blue",
 9          ],
10        data: graphData,
11    }],
12
13    // These labels appear in the legend and in the tooltips when hovering different arcs
14    labels: [
15        '完',
16        '未',
17    ]
18  };
19
20  var myDoughnutChart = new Chart(ctx, {
21    type: 'doughnut',
22    data: data,
23    options: {}
24  });
25});

html側をもうちょいアレする

まあ、こんなのとかか…

1<div class="card-group m-5">
2@foreach(range(1,4) as $i)
3<?php $rand = rand(0,10); ?>
4<div class="card card-body">
5  <canvas class="myChart" data-json="{{ json_encode([10 - $rand,$rand]) }}"></canvas>
6</div>
7@endforeach
8</div>

chart-001.png

今回はこんなんで勘弁してもらえるんでしょうか(笑)

オルタードスケールをさくっと弾けるようになる

オルタードスケールに関しては、基本的にIIm - V7 - IのV7で使うものなので、やたらめったらオルタードを弾き散らかしてはいかんという事になるんですが、そもそもロック系の奴はこの手のコードチェンジにクソ弱い。これは良い悪いとかではなく尺の捉え方の問題なのですが、ここでは言及しません。で、そうなるとオルタードは弾けません(重要)

たとえばAmキーの曲だとコードがわしわし変わっても転調しない限りはAmスケール(かAmハーモニックマイナーとか)一発で最初から最後まで弾き倒しちゃってokだったりするので、スケールの複雑さよりも単純な速さとかで勝負しがちになるというまあこれジャンルの違いって所なので、以上余談。

コードの繋がりってのはそもそも何なのかっていう

4つ打ちでDm - G7 - CMみたいなのをやった時のDmのフレーズを考えてみよう。こんなのは適当でいいです。ドリアンとか考えなくても、この辺真面目に読んでる層は多分大抵ドリアンになっているはず(笑)

オルタードとhmp5は似ているので混ざってしまいやすい

このようなフレーズがあるとしましょう。ドリアンの5とか11とかに落ちた場合を考えてみると…

この後のフレーズを連想するのがJazzです。これは楽器をやった事ある人じゃなくてもできるのでやってみてください?やる人おるんか?w

一番素直なフレーズを用意しました

002.png

今日は丁寧味があるね(笑)

これは単なる「Cメジャースケール」と捉える事もできますが、コード単位でみると「Dドリアンスケール」→「Gミクソリディアンスケール」の接続と捉える事もできるわけです。とはいえ、このフレーズを(ドリアン〜ミクソリディアンだよなー)って考えながら弾いてる人はほぼいないでしょう(ここ重要)

しかしこのような直線的なフレーズだとjazzっぽくない(しかし、安易にオルタードに逃げるのも個人的にはjazzっぽくないようにも思う、、メタルマンがハーモニックマイナー染めするような)、ので、オルタードに入っていきたいなと思った時にこの4弦7Fから4弦6Fに落ちていきやすいんですわ。これはメタルマンがハーニックマイナー弾き過ぎるとあるあるっす。

これは弾いてるうちにメジャーのII-V7-IからAmに解決するマイナーII-V7-Imに勝手になっちゃったパターンで、これを修正していく方法を次回記してみようと思います。

というか、世の中にはオルタードフレーズ集みたいなのがあるので、それをチクチク観察していった方がいいかな?

てか音楽の記事は別でやった方がいいね(笑)