chartjs-plugin-colorschemes

Chart.js 向けの定義済みカラーパレットプラグインです。
データビジュアライゼーションに最適なカラーセットを豊富に揃えました。

• スクリプトを含める

  まず Chart.js、chartjs-plugin-colorschemes.js をページに含める必要があります。

  <script type="text/javascript" src="Chart.js"></script>

  <script type="text/javascript" src="chartjs-plugin-colorschemes.js"></script>

• Create を作成する

  ページに Canvas を設置します。

  <canvas id="myChart"></canvas>

• チャートを作成する

  これでチャートを作成することができます。スクリプトをページに追加します。
  この例では、ランダムな数値のデータセットを生成しています。

  var ctx = document.getElementById('myChart').getContext('2d');

  var chart = new Chart(ctx, {

    type: 'line',

    data: {

      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],

      datasets: [1, 2, 3].map(function(i) {

        return {

          label: 'Dataset ' + i,

          data: [0, 0, 0, 0, 0, 0, 0].map(Math.random),

          fill: false

        };

      })

    }

  });

• カラースキームを選ぶ

  カラーチャートから好きなカラースキームを選びます。

    ...

    options: {

      plugins: {

        colorschemes: {

          scheme: 'brewer.Paired12'

        }

      }

    }

  カラースキーム: データセット数:

• ...これで完了です！

  GitHub リポジトリとカラーチャートもご覧ください。