如何將2D轉換爲3D餅圖？

Question

我有一個問題，請給我一些建議嗎？我想將piechart 2d轉換爲3d。請幫助我。請給我一些想法。 chek鏈接。 這是遵循鏈接是this is follow link is demo this is image of piechart

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
    <script> 

    $(function() { 

     var colors = Highcharts.getOptions().colors, 
      categories = ['Opp', 'Guess','Thre'], 
      data = [ { 
       y: 10.38, 
       color: colors[2], 
       drilldown: { 
        name: 'Firefox versions', 
        categories: ['Streanth'], 
        data: [70], 
        color: colors[2] 
       } 

      }, 
       { 
       y: 5.38, 
       color: colors[2], 
       drilldown: { 
        name: 'Firefox versions', 
        categories: ['Streanth'], 
        data: [70], 
        color: colors[2] 
       } 

      }, 

       { 
       y: 10.03, 
       color: colors[1], 
       drilldown: { 
        name: 'Chrome versions', 
        categories: ['Weakness' 
         ], 
        data: [30], 
        color: colors[1] 
       } 

      }], 
      browserData = [], 
      versionsData = [], 
      i, 
      j, 
      dataLen = data.length, 
      drillDataLen, 
      brightness; 


     // Build the data arrays 
     for (i = 0; i < dataLen; i += 1) { 

      // add browser data 
      browserData.push({ 
       name: categories[i], 
       y: data[i].y, 
       color: data[i].color 
      }); 

      // add version data 
      drillDataLen = data[i].drilldown.data.length; 
      for (j = 0; j < drillDataLen; j += 1) { 
       brightness = 0.2 - (j/drillDataLen)/5; 
       versionsData.push({ 
        name: data[i].drilldown.categories[j], 
        y: data[i].drilldown.data[j], 
        color: Highcharts.Color(data[i].color).brighten(brightness).get() 
       }); 
      } 
     } 

     // Create the chart 
     $('#container').highcharts({ 
      chart: { 
       type: 'pie' 
      }, 
      title: { 
       text: 'Browser market share, January, 2015 to May, 2015' 
      }, 
      subtitle: { 
       text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' 
      }, 
      yAxis: { 
       title: { 
        text: 'Total percent market share' 
       } 
      }, 
      plotOptions: { 
       pie: { 
        shadow: false, 
        center: ['50%', '50%'] 
       } 
      }, 
      tooltip: { 
       valueSuffix: '%' 
      }, 
      series: [{ 
       name: 'Browsers', 
       data: browserData, 
       size: '60%', 
       dataLabels: { 
        formatter: function() { 
         return this.y > 5 ? this.point.name : null; 
        }, 
        color: '#ffffff', 
        distance: -30 
       } 
      }, { 
       name: 'Versions', 
       data: versionsData, 
       size: '80%', 
       innerSize: '60%', 
       dataLabels: { 
        formatter: function() { 
         // display only if larger than 1 
         return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; 
        } 
       } 
      }] 
     }); 
    }); 

</script> 

這是HTML代碼

<div id="container" style="width: 600px; height: 400px; margin: 0 auto"></div> 

Answer 1

試試這個方法：

$(function() { 
 
var colors = Highcharts.getOptions().colors, 
 
      categories = ['Opp', 'Guess','Thre'], 
 
      data = [ { 
 
       y: 10.38, 
 
       color: colors[2], 
 
       drilldown: { 
 
        name: 'Firefox versions', 
 
        categories: ['Streanth'], 
 
        data: [70], 
 
        color: colors[2] 
 
       } 
 

 
      }, 
 
       { 
 
       y: 5.38, 
 
       color: colors[2], 
 
       drilldown: { 
 
        name: 'Firefox versions', 
 
        categories: ['Streanth'], 
 
        data: [70], 
 
        color: colors[2] 
 
       } 
 

 
      }, 
 

 
       { 
 
       y: 10.03, 
 
       color: colors[1], 
 
       drilldown: { 
 
        name: 'Chrome versions', 
 
        categories: ['Weakness' 
 
         ], 
 
        data: [30], 
 
        color: colors[1] 
 
       } 
 

 
      }], 
 
      browserData = [], 
 
      versionsData = [], 
 
      i, 
 
      j, 
 
      dataLen = data.length, 
 
      drillDataLen, 
 
      brightness; 
 

 

 
     // Build the data arrays 
 
     for (i = 0; i < dataLen; i += 1) { 
 

 
      // add browser data 
 
      browserData.push({ 
 
       name: categories[i], 
 
       y: data[i].y, 
 
       color: data[i].color 
 
      }); 
 

 
      // add version data 
 
      drillDataLen = data[i].drilldown.data.length; 
 
      for (j = 0; j < drillDataLen; j += 1) { 
 
       brightness = 0.2 - (j/drillDataLen)/5; 
 
       versionsData.push({ 
 
        name: data[i].drilldown.categories[j], 
 
        y: data[i].drilldown.data[j], 
 
        color: Highcharts.Color(data[i].color).brighten(brightness).get() 
 
       }); 
 
      } 
 
     } 
 

 

 
    
 
    $('#container').highcharts({ 
 
     chart: { 
 
      type: 'pie', 
 
      options3d: { 
 
       enabled: true, 
 
       alpha: 45, 
 
       beta: 0, 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       depth: 25 
 
      } 
 
     }, 
 
     series: [{ 
 
       name: 'Browsers', 
 
       data: browserData, 
 
       size: '60%', 
 
       dataLabels: { 
 
        formatter: function() { 
 
         return this.y > 5 ? this.point.name : null; 
 
        }, 
 
        color: '#ffffff', 
 
        distance: -30 
 
       } 
 
      }, { 
 
       name: 'Versions', 
 
       data: versionsData, 
 
       size: '80%', 
 
       innerSize: '60%', 
 
       dataLabels: { 
 
        formatter: function() { 
 
         // display only if larger than 1 
 
         return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null; 
 
        } 
 
       } 
 
      }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts-3d.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<div id="container" style="height: 400px"></div>

Answer 2

我像這樣解決了這個問題。

$(function() { 

      var colors = Highcharts.getOptions().colors, 
       categories = ['Strenth : 56', 'Weekness : 23'], 
       data = [{ 
        y: 20, 
        color: colors[0], 
        drilldown: { 
         name: 'Strenth', 
         categories: ['Opp', 'Guess'], 
         data: [15, 5], 
         color: colors[0] 
        } 
       }, { 
        y: 10, 
        color: colors[2], 
        drilldown: { 
         name: 'Threat', 
         categories: ['Wrong', 'Threat'], 
         data: [7, 3], 
         color: colors[2] 
        } 
       }, ], 
       totalData = [], 
       subData = [], 
       i, 
       j, 
       dataLen = data.length, 
       drillDataLen, 
       brightness; 


      // Build the data arrays 
      for (i = 0; i < dataLen; i += 1) { 

       // add browser data 
       totalData.push({ 
        name: categories[i], 
        y: data[i].y, 
        color: data[i].color 
       }); 

       // add version data 
       drillDataLen = data[i].drilldown.data.length; 
       for (j = 0; j < drillDataLen; j += 1) { 
        brightness = 0.2 - (j/drillDataLen)/5; 
        subData.push({ 
         name: data[i].drilldown.categories[j], 
         y: data[i].drilldown.data[j], 
         color: Highcharts.Color(data[i].color).brighten(brightness).get() 
        }); 
       } 
      } 

      // Create the chart 
      $('#container').highcharts({ 
       chart: { 
        type: 'pie', 
        options3d: { 
         enabled: true, 
         alpha: 45, 
         beta: 0 
        } 

       }, 
       title: { 
        text: '' 
       }, 
       subtitle: { 
        text: '' 
       }, 
       yAxis: { 
        title: { 
         text: 'Total percent market share' 
        } 
       }, 
       plotOptions: { 
        pie: { 
         shadow: true, 
         cursor: 'pointer', 
         depth: 45, 

        } 
       }, 
       tooltip: { 
        valueSuffix: '' 
       }, 
       series: [{ 
        name: 'Total', 
        data: totalData, 
        size: '60%', 
        dataLabels: { 
         formatter: function() { 
          return this.y > 5 ? this.point.name : null; 
         }, 
         color: '#ffffff', 
         distance: -30 
        } 
       }, { 
        name: 'SUB', 
        data: subData, 
        size: '80%', 
        innerSize: '40%', 
        dataLabels: { 
         formatter: function() { 
          // display only if larger than 1 
          return this.y > 0.5 ? '<b>' + this.point.name + ':</b> ' + this.y + '' : null; 
         } 
        } 
       }] 
      }); 
     }); 
     </script> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/highcharts-3d.js"></script> 
    <script src="http://code.highcharts.com/exporting.js"></script>