Skip to content

Instantly share code, notes, and snippets.

@quiye

quiye/hoge.html

Created October 16, 2017 15:20
Show Gist options
  • Save quiye/8226ba55e4a305f1fa2baf7369ce9799 to your computer and use it in GitHub Desktop.
Save quiye/8226ba55e4a305f1fa2baf7369ce9799 to your computer and use it in GitHub Desktop.
Download ZIP
chart.jsで横の積み重ねの練習
Raw
hoge.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
<p>
<canvas id="myChart" width="600" height="400">your browse cannnot use Canvas</canvas>
</p>
<script>
var ctx = document.getElementById("myChart");
const gakubu = [-3000, -2800, -2600, -3500, -3800, -4000, -4100, -2800, -2700, -3000, -3200, -3100];
const ippan = [-3000, -3000, -3000, -3000, -3000, -3000, -3000, -3000, -3000, -3000, -3000, -3000];
const repo_name = 'リポジトリ名';
const branch_names = [
"branch Jan checkouted by hogehoge",
"Feb.",
"Mar.",
"Apr.", "May", "Jun.", "Jul.", "Aug.", "Sep.", "Oct.", "Nov.", "Dec."];
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: branch_names,
datasets: [{
label: "final commit -> now",
borderWidth:1,
backgroundColor: "#121554",
borderColor: "#121554",
data: gakubu
},{
label: "first checkout -> final commit",
borderWidth:1,
backgroundColor: "#a7d8bf",
borderColor: "#a7d8bf",
data: ippan
}]
},
options: {
title: {
display: true,
text: repo_name,
padding:3
},
scales: {
xAxes: [{
stacked: true,
categoryPercentage:0.4
}],
yAxes: [{
position: 'right',
stacked: true
}]
},
legend: {
labels: {
boxWidth:30,
padding:20
},
reverse: true,
display: true
},
tooltips:{
mode:'label'
}
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment