创建一个HTML5画布与MeteorCharts折线图,我们可以实例化一个MeteorCharts。行对象容器DOM元素,一个模型配置,和一个视图配置。模型配置包含所有数据的图表,如标题和系列,和视图包含所有的样式,如图表大小、背景颜色和文本颜色。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/mc/js/lib/meteorcharts-v0.0.11.min.js"></script>
<script defer="defer">
var secondsInYear = 60 * 60 * 24 * 365;
// model configuration (data)
var model = {
title: 'Example Chart',
series: [{
title: 'Line 1',
points: [
{x: secondsInYear * 0, y: 7.0},
{x: secondsInYear * 1, y: 6.9},
{x: secondsInYear * 2, y: 9.5},
{x: secondsInYear * 3, y: 14.5},
{x: secondsInYear * 4, y: 18.2},
{x: secondsInYear * 5, y: 21.5},
{x: secondsInYear * 6, y: 25.2},
{x: secondsInYear * 7, y: 26.5},
{x: secondsInYear * 8, y: 23.3},
{x: secondsInYear * 9, y: 18.3},
{x: secondsInYear * 10, y: 13.9},
{x: secondsInYear * 11, y: 9.6}
]
},
{
title: 'Line 2',
points: [
{x: secondsInYear * 0, y: -0.2},
{x: secondsInYear * 1, y: 0.8},
{x: secondsInYear * 2, y: 5.7},
{x: secondsInYear * 3, y: 11.3},
{x: secondsInYear * 4, y: 17.0},
{x: secondsInYear * 5, y: 22.0},
{x: secondsInYear * 6, y: 24.8},
{x: secondsInYear * 7, y: 24.1},
{x: secondsInYear * 8, y: 20.1},
{x: secondsInYear * 9, y: 14.1},
{x: secondsInYear * 10, y: 8.6},
{x: secondsInYear * 11, y: 2.5}
]
}]
};
// view configuration (styling)
var view = {
width: 580,
height: 300
};
// line charts are instantiated with a container DOM element,
// a model, and a view
var lineChart = new MeteorCharts.Line({
container: 'container',
model: model,
view: view
});
</script>
</body>
</html>