如何删除Highchart图表饼图框

时间:2017-06-08 13:25:31

标签: javascript highcharts

如何删除图片iframe?

enter image description here



Highcharts.chart('container', {
      chart: {
         renderTo: 'container',
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: null
      },
      title: {
         text: 'Ideas por Estado',
         align: 'center',
         style:
         {
             color: '#000000',
            fontWeight: 'bold'
         }
      },
      credits: {
      	enabled: false
  		},   
      legend: {    
        align: 'center',
        verticalAlign: 'bottom',
        layout: 'vertical',
        itemStyle: {
            color: '#000000',
            fontSize: 12
        },
        x: 0,
        y: -50

      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            size: '80%',
            center: [ '50%', '45%' ],
            dataLabels: {
               enabled: true,
               distance: -35,
               color: '#ffffff',
               style: {
                   fontWeight: 'bold',
                   fontSize: 13
               },
               formatter: function() {
                  if(this.point.color=='#fd4c01'){
                      return '<span>' + this.y +' %</span>';
                  }
                  if(this.point.color=='#77c646'){
                      return '<span>' + this.y +' %</span>';
                  }
                  if(this.point.color=='#01a698'){
                      return '<span>' + this.y +' %</span>';
                  }
                  
               }
            },
            showInLegend: true
         },
      },
      series: [{
         type: 'pie',
         data: [
            {
                name: 'Company A',
                 y: 59.2,
                color: '#01a698'
            },
            {
                name: 'Company B',
                 y: 30.4,
                color: '#77c646'
            },
            {
                name: 'Company C',
                 y: 10.4,
                color: '#fd4c01'
            }
         ]
      }]
});
&#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"></div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

使用tooltip添加enabled : false对象,如下所示。

tooltip : {enabled : false }

Highcharts.chart('container', {
      chart: {
         renderTo: 'container',
         plotBackgroundColor: null,
         plotBorderWidth: null,
         plotShadow: null
      },
      title: {
         text: 'Ideas por Estado',
         align: 'center',
         style:
         {
             color: '#000000',
            fontWeight: 'bold'
         }
      },
      credits: {
      	enabled: false
  		},   
      legend: {    
        align: 'center',
        verticalAlign: 'bottom',
        layout: 'vertical',
        itemStyle: {
            color: '#000000',
            fontSize: 12
        },
        x: 0,
        y: -50

      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            size: '80%',
            center: [ '50%', '45%' ],
            dataLabels: {
               enabled: true,
               distance: -35,
               color: '#ffffff',
               style: {
                   fontWeight: 'bold',
                   fontSize: 13
               },
               formatter: function() {
                  if(this.point.color=='#fd4c01'){
                      return '<span>' + this.y +' %</span>';
                  }
                  if(this.point.color=='#77c646'){
                      return '<span>' + this.y +' %</span>';
                  }
                  if(this.point.color=='#01a698'){
                      return '<span>' + this.y +' %</span>';
                  }
                  
               }
            },
            showInLegend: true
         },
      },
      series: [{
         type: 'pie',
         data: [
            {
                name: 'Company A',
                 y: 59.2,
                color: '#01a698'
            },
            {
                name: 'Company B',
                 y: 30.4,
                color: '#77c646'
            },
            {
                name: 'Company C',
                 y: 10.4,
                color: '#fd4c01'
            }
         ]
      }],
      tooltip : {enabled : false }
});
<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"></div>