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

CSS

March 9, 2018

TAGS:
CSS

chart.cssはシンプルなCSSチャートシステム。

How To Use

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>

Example

グラフのパーセンテージを表示するには、data-percent属性に値を追加します
chart.css

<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

Demo/Download