javascript - 如何删除 Highchart 饼图的相框

标签 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'
            }
         ]
      }]
});
<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>

最佳答案

添加带有 enabled : falsetooltip 对象,如下所示。

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>

关于javascript - 如何删除 Highchart 饼图的相框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44437025/

相关文章:

javascript - jQuery 通过 attr 改变 ID 然后调用它

javascript - 谷歌地图js API : map is not centered in bootstrap

javascript - 将 Prop 从函数传递给全局上下文提供者

javascript - JSDOM:dom.window.document.innerHTML 未定义

javascript - Laravel 4 项目中的 Highcharts 不显示

javascript - Highcharts - 饼图动态更改切片颜色

javascript - 如何扩展 React 类?

javascript - 如何在不刷新html网页的情况下显示highchart系列图中的过渡?

javascript - Highcharts 、仪表图表、 slider 更新

javascript - 如何用json数据值重绘highchart系列?