Frappe Chartsを使ったデモ

frappe chartsのデモ

このデモは frappe charts v0.0.3を使用して作成しています。

npm i frappe-charts --save

yarn add frappe-charts

<script src="https://unpkg.com/frappe-charts/dist/frappe-charts.min.iife.js"></script>

import Chart from "frappe-charts/dist/frappe-charts.min.cjs";

// チャートの元になるデータ
var data =  {
  labels: ['1月', '2月', '3月', '4月', '5月', '6月',
    '7月', '8月', '9月', '10月', '11月', '12月',
  ],
  datasets: [
    {
      title: "Aさん の売上",
      // color: "red", // colorオブジェクトを入れるとグラフの色を指定できます
      values: [ 5, 8, 7, 8, 1, 2, 4, 5, 8, 3, 3, 7 ]
    },
    {
      title: "Bさん の売上",
      // color: "blue",
      values: [ 3, 2, 10, 2, 1, 4, 2, 7, 7, 4, 1, 9 ]
    },
    {
      title: "Cさん の売上",
      // color: "purple",
      values: [ 4, 4, 8, 10, 4, 1, 7, 6, 3, 4, 8, 5 ]
    }
  ]
}

Line チャート

<!-- HTML側 -->
<div id="line"></div>

// javascript側
new Chart({
  parent: '#line',
  title: "LINE チャートを使った 売上グラフ",
  data: data, // 変数 'data' のオブジェクトを適応
  type: "line"
});

Bar チャート

<div id="bar"></div>

new Chart({
  parent: '#bar',
  title: "Bar チャートを使った 売上グラフ",
  data: data,
  type: "bar",
  // height: 300 // height属性があるとグラフの高さが指定できます
});

Scatter チャート

<div id="scatter"></div>

new Chart({
  parent: '#scatter',
  title: "Scatter チャートを使った 売上グラフ",
  data: data,
  type: "scatter"
  // height: 300
});

Pieチャート

<div id="pie"></div>

var data = {
      labels: ['a', 'b', 'c', 'd'],
      datasets: [
          {
            values: [ 10, 20, 30, 40, ]
          }
        ]
  }

return new Chart({
  parent: '#pie',
  title: "pie チャートを使った 売上グラフ",
  data: data,
  type: "pie"
});

percentageチャート

<div id="percentage"></div>

var data = {
  labels: ['a', 'b', 'c', 'd'],
  datasets: [
      { values: [ 10, 20, 30, 40, ]}
    ]
  }

 new Chart({
  parent: '#percentage',
  title: "percentage チャートのサンプル",
  data: data,
  type: "percentage"
});

sum(合計) を表示

<div id="sum"></sum>
<button id="btnSum"> Show Sum </button>
<button id="hideSum"> Hide Sum </button>

new Chart({
  parent: 'sum',
  title: "'Show Sum'ボタンを押すと合計のグラフを表示します",
  data: data,
  type: "bar"
});

/* クリックイベントにはjQueryを使用しています */

// 合計の表示
$("#btnSum").click(function() {
  sum.show_sums();
});
// 合計表示を解除
$("#hideSum").click(function() {
  sum.hide_sums();
});

avarage (平均) を表示

<div id="avg"></div>
<button id="btnAvg">Show Avarage</button>
<button id="hideAvg">Hide Avarage</button>

var avg = new Chart({
  parent: '#avg',
  title: "'Show Avarage'ボタンを押すと値の平均のグラフを表示します",
  data: data,
  type: "bar"
});

/* クリックイベントにはjQueryを使用しています */
$("#btnAvg").click(function() => {
  avg.show_averages();
});

$("#hideAvg").click(function() => {
  avg.hide_averages();
});