chart.jsをフロントのデザインに使う

chart.jsは、キレイな可視化が簡単にできるJavaScriptのライブラリですが、使い方を工夫すればフロントのデザインにも流用できます。

データ系を扱うWebサイトであれば、サイトイメージと一致したデザインになると思います。

私はこんな感じで使っています。

fmbrain.work

サンプル

4つの構成要素

グラフを数秒ごとに変化させるには、普通のchart.jsで描くグラフに4つの追加要素を入れます。

• グラフ化するデータ生成

• chart.jsのグラフのアップデート

• 数秒ごとのアップデートの実行

• グラフからX軸・Y軸などを非表示

基本的なchart.jsのグラフ描画の部分は省きます。

ここがわからない方はドットインストールで学びましょう。

https://dotinstall.com/lessons/basic_chartjs

グラフ化するデータ生成

数秒毎にグラフを変化させるには、数秒毎にグラフに使うデータを変化させる必要があります。（当たり前ですが...）

適当に乱数でデータを作りましょう。

関数化して、数秒毎に使える形にしましょう。

function generateDataSets() {

  var datasets = []
  for (i=0; i<11; i++) {
    datasets.push(Math.random())
  }

  return datasets

}

chart.jsのグラフのアップデート

数秒毎のグラフのアップデートは、chart.jsの公式マニュアルにも使われています。

www.chartjs.org

便利なことにグラフをアップデートをさせるための関数が用意されています。

myChart.update();

マニュアルにもちゃんと書いてあります。

Updating Charts · Chart.js documentation

使い方は簡単で、グラフを描画しているクラスのデータを入れ替えたあとに、myChart.update();するだけです。

グラフをアップデートさせるコードも数秒毎に実行させるので、関数化します。

function addData() {

    var data = generateDataSets();
    myChart.data.datasets[0].data = data
    myChart.update();
}

数秒ごとのアップデートの実行

setIntervalで、先ほどのグラフをアップデートする関数を実行します。

setInterval(addData, 2000);

グラフからX軸・Y軸などを非表示

Y軸やら、マウスオンでチップが表示されるとグラフ感が出てしまうので、これらを非表示にする設定をします。

グラフに追加する設定は以下です。

• 凡例の非表示

• マウスオンしたときのチップの非表示

• X軸Y軸の非表示

• グリッド線の非表示

chart.jsはグラフに関する追加設定は、optionのところに書いていきます。

optionにこんな感じで書いていきます。

    legend : {
      display :false
    }

面倒なので、グラフの描画の部分ごと貼ります。

optionの部分に注目です。

var randomDatasets1 = generateDataSets();
var label = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

var ctx = document.getElementById("background-chart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: label,
    datasets: [{
      label: 'random1',
      data: randomDatasets1,
      backgroundColor: "rgba(53,216,53,0.5)"
      // backgroundColor: "#FDD835"
    }]
  },
  options: {
    legend : {
      display :false
    },
    tooltips : {
      enabled: false
    },

  scales: {
    xAxes: [{
      display: false,
      gridLines: {
        drawBorder: false
      }
    }],
    yAxes: [{
      display: false,
      gridLines: {
        drawBorder: false
      }
    }]

    }

  }
});

構成要素の完成

これら4つの設定を追加することで、フロントのデザインに流用できるグラフが完成します。

ソースコード貼っておくので、見てみてください。

ソースコード

<canvas id="background-chart">
</canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<script>
function generateDataSets() {

  var datasets = []
  for (i=0; i<11; i++) {
    datasets.push(Math.random())
  }

  return datasets

}

var randomDatasets1 = generateDataSets();
var label = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

var ctx = document.getElementById("background-chart").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: label,
    datasets: [{
      label: 'random1',
      data: randomDatasets1,
      backgroundColor: "rgba(53,216,53,0.5)"
      // backgroundColor: "#FDD835"
    }]
  },
  options: {
    legend : {
      display :false
    },
    tooltips : {
      enabled: false
    },

  scales: {
    xAxes: [{
      display: false,
      gridLines: {
        drawBorder: false
      }
    }],
    yAxes: [{
      display: false,
      gridLines: {
        drawBorder: false
      }
    }]

    }

  }
});

function addData() {
    var data = generateDataSets();
    myChart.data.datasets[0].data = data

    myChart.update();
}

setInterval(addData, 2000);