CSS
【CSS】シンプルなCSSチャートシステムchart.css
March 9, 2018

chart.cssはシンプルなCSSチャートシステム。
chart.cssをインクルード
<!-- Downloaded chart.css --> <link rel="stylesheet" href="chart.css"> <!-- RawGit CDN chart.css --> <link rel="stylesheet" href="https://cdn.rawgit.com/theus/chart.css/v1.0.0/dist/chart.css" />
HTMLセットアップ
<div class="charts"> <div class="charts__chart"></div> ... </div>
グラフのパーセンテージを表示するには、data-percent
属性に値を追加します
<div class="charts"> <div class="charts__chart" data-percent="100%"></div><!-- /.charts__chart --> <div class="charts__chart" data-percent="60%" style="width: 60%"></div><!-- /.charts__chart --> <div class="charts__chart" style="width: 40%"></div><!-- /.charts__chart --> <div class="charts__chart" style="width: 10%"></div><!-- /.charts__chart --> </div><!-- /.charts -->
MIT