Skip to content

Instantly share code, notes, and snippets.

@fotock

fotock/index.html

Last active August 29, 2015 14:17
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fotock/77934514d90b0ff92fd3 to your computer and use it in GitHub Desktop.
Save fotock/77934514d90b0ff92fd3 to your computer and use it in GitHub Desktop.
Download ZIP
Chart.js Bar Chart
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar-legend {list-style: none; overflow: auto; margin-left: 17px;}
.bar-legend li {float: left; margin-right: 20px;}
.bar-legend span {display: block; width: 20px; height: 20px; float: left; margin-right: 6px;}
</style>
<body>
<div id="legend"></div>
<canvas id="jsChart" width="800" height="400" style="margin:10px 30px;"></canvas>
<script src="https://cdn.rawgit.com/nnnick/Chart.js/master/Chart.js"></script>
<script>
var data = {
labels: ["3月20日", "3月21日", "3月22日", "3月23日", "3月24日", "3月25日", "3月26日", "3月27日", "3月28日"],
datasets: [
{
label: "预计完成",
fillColor: "rgba(200,200,200,0.7)",
strokeColor: "rgba(200,200,200,0.8)",
highlightFill: "rgba(200,200,200,0.9)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40, 48, 30]
},
{
label: "实际完成",
fillColor: "rgba(255,128,0,0.7)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(255,128,0,0.9)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90, 44, 38]
}
]
};
var options = {
barShowStroke : false,
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var ctx = document.getElementById("jsChart").getContext("2d");
var myChart = new Chart(ctx).Bar(data, options);
document.getElementById("legend").innerHTML=myChart.generateLegend();
</script>
</body>
@fotock
Copy link
Author

fotock commented Mar 26, 2015

Live view:
http://bl.ocks.org/fotock/raw/77934514d90b0ff92fd3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment