frappe chartを使ってグラフを更新する方法
frappe chartを使ってグラフを更新する方法と、ドキュメントに載っているサンプルを書いています。
最終的に↓ができます。
html、javascriptをコピペするといくつかのサンプルも確認できます。
導入
まずはインストールします。
npm install frappe-charts
もしくは↓をhtmlにいれます。
動作を確認したい場合はわざわざビルドまでやるのは面倒なので、cdnを利用することが多いです。
<script src="https://cdn.jsdelivr.net/npm/frappe-charts@1.1.0/dist/frappe-charts.min.iife.js"></script>
サンプル
chart_01 ~ 5まではドキュメントに載っているサンプルを試しています。
コピペして試してみてください。
index.html
htmlは<html>や<head>など一部省略しています。
<body> <div id="chart_01"></div> <div id="chart_02"></div> <div id="chart_03"></div> <div id="chart_04"></div> <div id="chart_05"></div> <!-- ↓ 1秒ごとにグラフを更新する --> <div id="chart_06"></div> </body>
index.js
(function() {
function frappe_01() {
/**
* quick start
*/
const data = {
labels: ["12am-3am", "3am-6pm", "6am-9am", "9am-12am",
"12pm-3pm", "3pm-6pm", "6pm-9pm", "9am-12am"
],
datasets: [
{
name: "Some Data", type: "bar",
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", type: "line",
values: [25, 50, -10, 15, 18, 32, 27, 14]
}
]
}
const chart = new frappe.Chart("#chart_01", { // or a DOM element,
// new Chart() in case of ES6 module with above usage
title: "My Awesome Chart",
data: data,
type: 'axis-mixed', // or 'bar', 'line', 'scatter', 'pie', 'percentage'
height: 250,
colors: ['#7cd6fd', '#743ee2']
})
}
function frappe_02() {
/**
* Axis Charts: Axis chart: What Is It
*/
data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ values: [18, 40, 30, 35, 8, 52, 17, -4] }
]
}
new frappe.Chart( "#chart_02", {
data: data,
type: 'line', //bar or line
height: 250,
colors: ['red']
});
}
function frappe_03() {
/**
* Axis Charts: Adding more datasets
*/
var data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
]
}
new frappe.Chart( "#chart_03", {
data: data,
type: 'line', //bar or line
height: 250,
colors: ['red']
});
}
function frappe_04() {
/**
* Axis Charts: Responsiveness
*/
var data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
{ name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
]
}
new frappe.Chart( "#chart_04", {
data: data,
type: 'bar', //bar
height: 250,
colors: ['red'],
barOptions: {
spaceRatio: 0.8 // default: 1
},
});
}
function frappe_05() {
/**
* Axis Charts: More Tweaks
*/
var data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{ name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
]
}
new frappe.Chart( "#chart_05", {
data: data,
type: 'bar', //bar
height: 250,
colors: ['red'],
axisOptions: {
xAxisMode: 'tick' // default: 'span'
// ↑ 縦軸がなくなる
},
});
}
function frappe_06() {
/**
* original: data append
*/
var data = {
labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
name: "Dataset 1",
values: [18, 40, 30, 35, 8, 52, 17, -4] },
]
}
var chart = new frappe.Chart( "#chart_06", {
data: data,
type: 'bar', //bar
height: 250,
colors: ['red'],
barOptions: {
spaceRatio: 0.8 // default: 1
},
});
var data_push = function(){
var values_size = data.datasets[0].values.length;
for (var vi = 0; vi < values_size; vi++) {
data.datasets[0].values.splice(
vi, 1, Math.random() * (100 - 0) + 0
)
}
chart.update(data);
var id = setTimeout(data_push, 1000);
}
data_push();
}
function init() {
console.log('called init function.');
frappe_01();
frappe_02();
frappe_03();
frappe_04();
frappe_05();
frappe_06();
}
document.addEventListener('DOMContentLoaded', function() {
init();
}, false);
})()
