Skip to content

Instantly share code, notes, and snippets.

@fotock

fotock/index.html

Last active August 29, 2015 14:17
Show Gist options
  • Save fotock/39ec4610cad9bb783c8e to your computer and use it in GitHub Desktop.
Save fotock/39ec4610cad9bb783c8e to your computer and use it in GitHub Desktop.
Download ZIP
Chart.js Practice
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<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: ["03-24", "03-25", "03-26", "03-27", "03-28", "03-29", "03-30"],
datasets: [
{
label: "最高气温",
data: [18, 18, 20, 22, 22, 21, 20],
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)"
},
{
label: "最低气温",
data: [3, 3, 8, 10, 9, 9, 10],
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)"
}
]
};
var options = {
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
scaleShowHorizontalLines: true,
scaleShowVerticalLines: true,
bezierCurve : true,
bezierCurveTension : 0.4,
pointDot : true,
pointDotRadius : 4,
pointDotStrokeWidth : 1,
pointHitDetectionRadius : 20,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
};
var ctx = document.getElementById("jsChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(data, options);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment