つれづれなる備忘録

日々の発見をあるがままに綴る

今週のお題「新生活が捗る逸品」

その他 雑記

f:id:ATATAT:20210403180508p:plain:w600

お題「#新生活が捗る逸品」

今週のお題は「新生活が捗る逸品」だが、特に変化はなくすぐに購入が必要なものもないが、購入から時間が経っていてそろそろ支障が発生してもおかしくないものをピックアップしてみる。

テレビ

地デジ完全移行の前年の2010年秋に購入したパナソニックの50型プラズマテレビ。最近少しだけノイズ（細い線）が入ることがあるが、他は特に異常なし。プラズマテレビ自体が生産終了になっているので買い替えるとしたら、次の買い替え周期10年ぐらいを見込むと8Kあたりになるか。

デスクトップPC

東芝のデスクトップ一体型PC(Regza PC)で2012年の冬場に、使っていたノートPCの調子が悪くなって買い替え。昨年のWin7からWin10の切り替えのタイミングで買い替えようと思ったが、Win7からのアップグレードすることができたのでそのまま使い続けている。HDDは問題ないが数年おきにファンの調子が悪くなるので（修理費に1万円近くかかる）、次に悪くなったら買い替える予定。

iPod touch

2011年ぐらいに買った第４世代iPod touchを未だに使い続けている。スマホでもよいが、使い分けることでバッテリーを持たせることができている。たまに応答性が悪くなるが、その他は特に支障がない。

ブログデザイン備忘録 ～ チャート作成2

HTML/CSS

　前回に続きHTML上のテーブルの数値をグラフに変換するCharts.cssを用いて縦方向のバーチャート、エリアチャート、ラインチャートの作成方法について紹介する。

atatat.hatenablog.com

前回紹介したように、charts.cssを読み込んだ上で作成したテーブルのclass名を変換したいチャート形式に紐づく特定のクラス名にする。

ただし、テーブルなどの数値を自動的にグラフにするわけではなく、例えば各データのバーの長さはHTMLのstyleで指定する必要があった。

1. 縦方向のバーチャート

　前回は横方向のバーチャートだったが、縦方向のバーチャートを適用するにはclass="charts-css column"とする。バーの長さについては各データに対してstyle="--size:0.46;"などとして指定する。 このまま適用すると縦方向につぶれたようなバーチャートが表示されるため、tableの例えばid="my-chart"としてIDを割り振りCSSで縦サイズを指定すると綺麗なバーチャートが得られる。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

<table class="charts-css column multiple show-heading show-labels" id="my-chart">
 
  <caption>Multiple Dataset Table </caption>
 
  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Progress 1 </th>
      <th scope="col"> Progress 2  </th>
      <th scope="col"> Progress 3 </th>
      <th scope="col"> Progress 4 </th>
      <th scope="col"> Progress 5 </th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <th scope="row"> 2000 </th>
      <td style="--size:0.46;"> 46 </td>
      <td style="--size:0.37;"> 37 </td>
      <td style="--size:1.0;"> 100 </td>
      <td style="--size:0.7;"> 70 </td>
      <td style="--size:0.4;"> 40 </td>
    </tr>
  <!- …(中略) ->
  </tbody>
 
</table>

#my-chart {
  height:250px;
  width:500px;
}

3. エリアチャート、ラインチャート

　エリアチャート、ラインチャートを作成するには、要素のサイズだけでなく一つ前の要素サイズを指定する必要がある。そこで例えばstyle="--start: 0.2; --size: 0.4"とすると前の要素0.2から現在の要素0.4への変動を指定することができ、次の要素は例えばstyle="--start: 0.4; --size: 0.8"と指定する。エリアチャートにする場合はclass="charts-css area", ラインチャートはclass="charts-css line"とする。縦方向のバーチャートと同様にIDを割り振って、CSSで縦方向のサイズを指定すると綺麗なチャートが得られる。

<table class="charts-css area show-heading show-labels" id="my-chart2">
 
<caption>Multiple Dataset Table </caption>

  <tbody>
    <tr>
      <td style="--start: 0.2; --size: 0.4"> <span class="data"> $ 40K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.4; --size: 0.8"> <span class="data"> $ 80K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.8; --size: 0.6"> <span class="data"> $ 60K </span> </td>
    </tr>
    <tr>
      <td style="--start: 0.6; --size: 1.0"> <span class="data"> $ 100K </span> </td>
    </tr>
    <tr>
      <td style="--start: 1.0; --size: 0.3"> <span class="data">$30K </span> </td>
    </tr>
  </tbody>

</table>

#my-chart2 {
  height:250px;
  width:500px;
}

3. 実装例

　以上上で取り上げた縦方向のバーチャート、エリアチャート、ラインチャートの実装例を以下に示す。

See the Pen charts-2 by ATATAT (@atatat) on CodePen.

ブログデザイン備忘録 ～ チャート作成

HTML/CSS

　今回はHTML上のテーブルの数値をグラフに変換するCharts.cssについて紹介する。

詳細や実際に作成できるチャートの例は以下に

coliss.com

chartscss.org

おおまかな使用方法としては、まずcharts.cssを読み込んだ上で作成したテーブルのclass名を変換したいチャート形式に紐づく特定のクラス名にするだけでよい。

ただし、実際に使ってみるとチャート形式の変換までで、例えばバーチャートの場合、各データのバーの長さはHTMLのstyleで指定する必要があった。

chatrs.cssを読み込むには外部ファイルとしてロードする方法やCDNを利用する方法があるが、今回はCDNを利用する。

htmlコードの概略は以下の通りで、CDNからcharts.cssを読み込み、バーチャートの場合はtableのクラス名をchats-css barとする。 テーブルのデータを反映したバーの長さにするため、<td style="--size:0.46;">などとする。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/charts.css/dist/charts.min.css">

<table class="charts-css column multiple show-heading show-labels" id="my-chart">
 
  <caption>Multiple Dataset Table </caption>
 
  <thead>
    <tr>
      <th scope="col"> Year </th>
      <th scope="col"> Progress 1 </th>
      <th scope="col"> Progress 2  </th>
      <th scope="col"> Progress 3 </th>
      <th scope="col"> Progress 4 </th>
      <th scope="col"> Progress 5 </th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <th scope="row"> 2000 </th>
      <td style="--size:0.46;"> 46 </td>
      <td style="--size:0.37;"> 37 </td>
      <td style="--size:1.0;"> 100 </td>
      <td style="--size:0.7;"> 70 </td>
      <td style="--size:0.4;"> 40 </td>
    </tr>
  <!- …(中略) ->
  </tbody>
 
</table>

以下のCode Penの実装では、バーチャートにタイトル、ラベルなど追加するためクラス名をcharts-css bar multiple show-heading show-labelsとしている。

なおChart Builderを使用するとオプションをつけた時のチャートの仕上がりと指定するクラス名を得ることができる。

chartscss.org

See the Pen chart by ATATAT (@atatat) on CodePen.