您的位置：首页 > 其它

highcharts:根据Y的数值范围，动态改变图形的填充颜色

2015-03-31 15:31 656 查看

图形实例：

源代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="http://code.highcharts.com/highcharts.js" type="text/javascript" charset="utf-8"></script>
<script src="http://blacklabel.github.io/multicolor_series/js/multicolor_series.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://blacklabel.github.io/multicolor_series/css/styles.css"/>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'coloredarea',
zoomType: 'xy',
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: '<span class="chart-title">Multicolor series<span class="chart-href"> <a href="http://www.blacklabel.pl/highcharts" target="_blank"> Black Label </a> </span> <span class="chart-subtitle">plugin by </span></span>'
},
series: [{
type: 'coloredarea',
data: [{
y: 200,
segmentColor: 'rgba(255,0,0,0.5)'
}, {
y: 210,
segmentColor: 'rgba(120,255,120,0.5)'
}, {
y: 210,
segmentColor: 'rgba(255,0,0,0.5)'
}, {
y: 180,
segmentColor: 'rgba(120, 120, 250, 0.9)'
}, {
y: 180,
segmentColor: 'red'
}]
}]
});
});
</script>
<body>
<div id="container" class="chart"></div>
</body>
</html>
转载至：http://jsfiddle.net/BlackLabel/tg58gc6x/

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航