文本阴影是如何错误的

时间:2017-07-21 21:13:41

标签: javascript

如何从图表中的数字中删除阴影?



Highcharts.chart('container', {
		      chart: {
		         renderTo: 'container',
		         plotBackgroundColor: null,
		         plotBorderWidth: null,
		         plotShadow: null
		      },
		      title: {
		         text: 'STATUS',
		         align: 'center',
		         style:
		         {
		         	fontSize:'14px',
		            color: '#000000',
		            fontWeight: 'bold'
		         }
		      },
		      credits: {
		      	enabled: false
		  		},   
		      legend: {    
		        align: 'center',
		        verticalAlign: 'middle',
		        layout: 'vertical',
		        floating: true,
		        itemStyle: {
		            color: '#000000',
		            fontSize: 12
		        },
		        symbolRadius: 0,
				y: 115,
		      },
		      plotOptions: {
		         pie: {
		            allowPointSelect: true,
		            cursor: 'pointer',
		            size: '100%',
		            center: [ '50%', '25%' ],
		            dataLabels: {
		               enabled: true,
		               distance: -35,
		               color: '#ffffff',
		               style: {
		                   fontSize: 13
		               },
		               formatter: function() {
		                  if(this.point.color=='#01a698'){
		                      return '<span>' + this.y +'</span>';
		                  }
		                  if(this.point.color=='#77c646'){
		                      return '<span>' + this.y +'</span>';
		                  }
		                  if(this.point.color=='#fd4c01'){
		                      return '<span>' + this.y +'</span>';
		                  }
		                  if(this.point.color=='#f7921d'){
		                      return '<span>' + this.y +'</span>';
		                  }
		                  if(this.point.color=='#f7af33'){
		                      return '<span>' + this.y +'</span>';
		                  }

		               }
		            },
		            showInLegend: true
		         },
		      },
		      series: [{
		         type: 'pie',
		         data: [
		            {
		                name: '1',
		                 y: 19,
		                color: '#01a698'
		            },
		            {
		                name: '2',
		                 y: 11,
		                color: '#77c646'
		            },
		            {
		                name: '3',
		                 y: 12,
		                color: '#fd4c01'
		            }
		            ,
		            {
		                name: '4',
		                 y: 17,
		                color: '#f7921d'
		            }
					,
		            {
		                name: '5',
		                 y: 13,
		                color: '#f7af33'
		            }
		         ]
		      }],
		      tooltip : {
		      	enabled : false 
		      }
			});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height:250px"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您需要将textOutline: false添加到配置中的style对象:

style: {
  fontSize: 13,
  textOutline: false
},

此处也已经回答:Remove shadow/background glow on highcharts data label?