jQuery

【jQuery】軽量の水平棒グラフライブラリhBarChart

February 4, 2017

hBarChartは軽量の水平棒グラフjQueryライブラリ。

Add jQuery first

<script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Now add hBarChart.js

<script src="hBarChart.js"></script>

Default Settings

<ul class="chart1">
        <li data-data="1330">ABC</li>
        <li data-data="1600">CDE</li>
        <li data-data="550">MMC</li>
        <li data-data="420">IJK</li>
        <li data-data="780">IJK</li>
        <li data-data="250">IJK</li>
        <li data-data="1800">IJK</li>
        <li data-data="300">IJK</li>
        <li data-data="900">IJK</li>
    </ul>
    

      $("ul.chart").hBarChart();

Customize 1

<ul class="chart1">
      <li data-data="1330">ABC</li>
      <li data-data="1600">CDE</li>
      <li data-data="550">MMC</li>
      <li data-data="420">IJK</li>
      <li data-data="780">IJK</li>
      <li data-data="250">IJK</li>
      <li data-data="1800">IJK</li>
      <li data-data="300">IJK</li>
      <li data-data="900">IJK</li>
  </ul>
  
            
  $("ul.chart1").hBarChart({
        bgColor: '#C000',
        textColor: '#fff',
        show: 'data',
        sorting: true,
        maxStyle: {
            bg: 'orange',
            text: 'white'
        }
  });

Demo/Download