2020-11-10
11時
— ー (@gozapon) November 16, 2020
そらいきなり朝から鶴亀堂よ
その後
いけあでドーナツチャート書いてた
歯がガンガンいたいけど夜になったらおさまってきた、、、
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とかに落ちた場合を考えてみると…
— ー (@gozapon) November 10, 2020
この後のフレーズを連想するのがJazzです。これは楽器をやった事ある人じゃなくてもできるのでやってみてください?やる人おるんか?w
一番素直なフレーズを用意しました
— ー (@gozapon) November 10, 2020
002.png
今日は丁寧味があるね(笑)
これは単なる「Cメジャースケール」と捉える事もできますが、コード単位でみると「Dドリアンスケール」→「Gミクソリディアンスケール」の接続と捉える事もできるわけです。とはいえ、このフレーズを(ドリアン〜ミクソリディアンだよなー)って考えながら弾いてる人はほぼいないでしょう(ここ重要)
しかしこのような直線的なフレーズだとjazzっぽくない(しかし、安易にオルタードに逃げるのも個人的にはjazzっぽくないようにも思う、、メタルマンがハーモニックマイナー染めするような)、ので、オルタードに入っていきたいなと思った時にこの4弦7Fから4弦6Fに落ちていきやすいんですわ。これはメタルマンがハーニックマイナー弾き過ぎるとあるあるっす。
— ー (@gozapon) November 10, 2020
これは弾いてるうちにメジャーのII-V7-IからAmに解決するマイナーII-V7-Imに勝手になっちゃったパターンで、これを修正していく方法を次回記してみようと思います。
というか、世の中にはオルタードフレーズ集みたいなのがあるので、それをチクチク観察していった方がいいかな?
てか音楽の記事は別でやった方がいいね(笑)