* Highcharts *摆脱百分比面积图中的颜色 [英] *Highcharts* Get rid of the color in the percentage area chart
本文介绍了* Highcharts *摆脱百分比面积图中的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这样的百分比面积图表: http://www.highcharts.com / demo / area-stacked-percent ,并想问问有没有什么方法可以去掉该区域的颜色?所以我们只有线和白色背景?
解决方案
我想这就是你要找的:
< script src =https: //code.highcharts.com/highcharts的.js >< /脚本>< SCRIPT SRC = https://code.highcharts.com/modules/exporting.js >< /脚本>< DIV ID = 容器 风格=最小宽度:310px; height:400px;最大宽度:800px; margin:0 auto>< / div>
I have a percentage area chart like this: http://www.highcharts.com/demo/area-stacked-percent and want to ask that are there any ways to get rid of the area's color ? so that we have only the lines and the white background ?
解决方案
I guess this is what you're looking for:
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Distribution by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Percent'
}
},
tooltip: {
pointFormat: '<span style="color:#ffffff">{series.name}</span>: <b>{point.percentage:.1f}%</b> ({point.y:,.0f} millions)<br/>',
shared: true
},
plotOptions: {
area: {
stacking: 'percent',
lineColor: '#ffffff',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#ffffff'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>
这篇关于* Highcharts *摆脱百分比面积图中的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文