Last active
August 29, 2015 14:17
-
-
Save fotock/77934514d90b0ff92fd3 to your computer and use it in GitHub Desktop.
Chart.js Bar Chart
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> | |
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Live view:
http://bl.ocks.org/fotock/raw/77934514d90b0ff92fd3