HTMLのtableにクラスを加えるだけで、グラフやチャートを簡単に実装できるCSSのフレームワーク -Charts.css

棒グラフや折れ線グラフ、どうやって実装していますか？ Charts.cssなら簡単です。データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワークを紹介します。 HTMLは普通の表組みなのでアクセシブル、グラフやチャートはレスポンシブにも完全対応した優れものです。 Charts.css Charts.css -GitHub Charts.cssの特徴 Charts.cssのデモ Charts.cssの使い方 Charts.cssの特徴 Charts.cssはtableで実装した表組みにシンプルなCSSのクラスを加えるだけで、さまざまなグラフやチャートを実装できるフレームワークです。カスタマイズも簡単で、ユーティリティのクラスも豊富に用意されています。 HTMLとCSSだけで実装 セマ

[coliss]

データをtableタグで実装し、CSSのクラスをtableに加えるだけで横棒グラフ、棒線グラフ、折れ線グラフ、エリアグラフなどを簡単に実装できるCSSのフレームワーク。

[mochinaga]

js使ってないの！？すごっ！

[lifeisadog]

わかりにくい表組みを作ってCSSで無理矢理グラフにするより、結局JSでグラフにする方がいいな

[securecat]

うーん、グラフをtableでマークアップするのが正しいのか？というと、正しくないと思うわけで、なんか違うと思う

[ifttt]

へ、変態だー！と思ったけど俺が置いていかれてるのか

[fashi]

凄いけど軸がなくて値も読めない / builderでShow Data on Hoverにすると読めるようになる模様

[yomogi]

手軽にビジュアライズできるのはよさそう。

[djshigy]

graph

[keidge]

css芸。

[ninpowar]

便利そう

[tohima]

すごいなー、CSSだけでいけるんだ

[RyotaTakimoto]

グラフのためだけにフレームワーク頼っちゃうくらいなら、ドットインストールでJS頑張って自分でグラフチャートデザインできるようになる方が良さそう。

[m_c2n]

jsでやった方が絶対簡単だしパフォーマンスも良さそう

[pmint]

違うでしょ。普通に分かると思うけど、それだけではチャートにならない。公式サイトの例を見ると案の定 <td style="--size:0.125;"></td> なんて書いてある。

[ptpadan]

js系より簡単そうかな？

[shikiarai]

tableか……なるほどねぇ……なんか上手く使えねえかなぁ……

[t0ng]

ロマンはあるけど、ロマンしかない

[gla69]

お、面白そう。cssだけでいけるのか…

[susieq]

おお、良さそう。CSSだけでいけるのか

[yoiIT]

昔からあった気がしたけど、JS使わずにCSSだけなのか。それは初めて見た。

[yukimurasama]

用途は不明だけど試しに導入してみたい🥺

[blogpants]

検索につよかったりするんだろうか？

[anpaku]

勉強します。

[megane1972]

仕組みが全く想像できない。

[tcngn]

chart.js

[RATCHO]

凄い！！けどJSていいや

[mayumayu_nimolove]

そのうちcssだけでドラクエ動かせたらすごいな

[odakaho]

すごいんだけど、jsonレスポンスを一旦tableにすることを考えるとひと手間多い感あるね

[mabushii_sign]

他のコメントにもあるけど、凄いけど今はもう使わないかなぁ。

[Dragoonriders]

tableの正しい使い方かもな。

[laptice]

CSSのClassだけでTableをグラフやチャートにできるフレームワーク。ものによってはまだUnderConstructionだけど、素敵。

[programmablekinoko]

凄い・・・が昔行われていたtableでレイアウトを組むに近い

[jantyran7]

すごい

[lavitaebella]

ほほぅ……

[minamishinji]

へー

[kkobayashi]

すげーな。CSSだけでできるの？