This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myBubble" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myBubbleElement = document.getElementById("myBubble"); | |
var myBubble = new Chart(myBubbleElement, { | |
type: 'bubble', // チャートのタイプ | |
data: { // チャートの内容 | |
datasets: [{ | |
label: 'red', | |
data: [{x:4, y:5}, {x:5, y:9, r:10}], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myScatter" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myScatterElement = document.getElementById("myScatter"); | |
var myScatter = new Chart(myScatterElement, { | |
type: 'scatter', // チャートのタイプ | |
data: { // チャートの内容 | |
datasets: [{ | |
label: 'red', | |
data: [{x:4, y:5}, {x:5, y:9}], |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myPolarArea" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myPolarAreaElement = document.getElementById("myPolarArea"); | |
var myPolarArea = new Chart(myPolarAreaElement, { | |
type: 'polarArea', // チャートのタイプ | |
data: { // チャートの内容 | |
labels: ["one", "two", "three"], | |
datasets: [{ | |
label: 'polarArea', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myPie" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myPieElement = document.getElementById("myPie"); | |
var myPie = new Chart(myPieElement, { | |
type: 'pie', // チャートのタイプ | |
data: { // チャートの内容 | |
labels: ["one", "two", "three"], | |
datasets: [{ | |
label: 'pie', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myDoughnut" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myDoughnutElement = document.getElementById("myDoughnut"); | |
var myDoughnut = new Chart(myDoughnutElement, { | |
type: 'doughnut', // チャートのタイプ | |
data: { // チャートの内容 | |
labels: ["one", "two", "three"], | |
datasets: [{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myRadar" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myRadarElement = document.getElementById("myRadar"); | |
var myRadar = new Chart(myRadarElement, { | |
type: 'radar', // チャートのタイプ | |
data: { // チャートの内容 | |
labels: ["one", "two", "three", "four", "five", "six"], | |
datasets: [{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myBar" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var myBarElement = document.getElementById("myBar"); | |
var myBar = new Chart(myBarElement, { | |
type: 'bar', // チャートのタイプ | |
data: { // チャートの内容 | |
labels: ["one", "two", "three", "four", "five", "six"], | |
datasets: [{ | |
label: 'red', |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> | |
<canvas id="myLine" style="width: 100%; height: 300px;"></canvas> | |
<script> | |
var ctx = document.getElementById("myLine"); | |
var myLine = new Chart(ctx, { | |
type: 'line', // チャートのタイプ | |
data: { // チャートの内容 | |
labels: ["one", "two", "three", "four", "five", "six"], | |
datasets: [{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="ja"> | |
<head> | |
<meta charset="utf-8"> | |
<!-- その他内容(任意) --> | |
</head> | |
<body> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.1/c3.min.css" rel="stylesheet"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.5.1/c3.min.js"></script> | |
<div id="sample-c3" style="width: 100%; height: 300px;"></div> | |
<script type="text/javascript"> | |
var chart = c3.generate({ | |
bindto: '#sample-c3', | |
data: { | |
columns: [ | |
['data1', 30, 200, 100, 400, 150, 250] |
NewerOlder