之前被这个Highcharts饼状图弄死了,这个Highcharts在项目上要求在电视上显示饼状图,页面都做好了,放在电视上结果看不清,本来电视上就装的高,导致字体太小,没办法,只能想办法调整字体大小。
结果废了九牛二虎之力都没搞定,弄了几天,百度上也没有什么好的解决办法,最终还是自己试成功了。
原来是之前引用的类和js有问题,引用多了,把那些都注释,在按照Highcharts官网上的代码一步步写。
在非必要情况下尽量只用官网上的代码,自己写的代码容易和Highcharts上的代码出现冲突。
下面是源码:
<script type="text/javascript">
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: '库存物料批号占比', style: {
fontSize: '50px', color: 'red' //这边是改标题的字体大小和颜色
}
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true, // 可以被选择
cursor: 'pointer', // 鼠标样式
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
fontSize: '40px',//这个是改饼状图里面显示的字体
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
就按照这样写,一定不会错的