风格MeteorCharts系列,我们可以定义一系列属性视图中的配置设置为一个数组的风格。每个系列的风格是直接传递到KineticJS渲染引擎,这意味着我们可以设置系列颜色,宽度,和不透明性,创建冲或虚线,添加阴影,等属性的完整列表,可以用于风格一个数据系列,请参阅KineticJS行教程,或者看看动能,线文档
<!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,
series: [
{
stroke: '#afe225',// light green
strokeWidth: 4,
// dashed line
dashArray: [10, 10]
},
{
stroke: '#fc009a', // pink
strokeWidth: 6,
}
]
};
// 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>