WordPress的插件：Yop民意調查與餅圖

Question

你有沒有試過整合餅圖與YOP民意調查插件（visible here）？ 我想用來自Highchart.js的甜甜圈圖表來呈現民意調查結果。 但Yop民意調查「唯一」默認集成條形圖。

你有什麼建議來達到這個目的？

Answer 1

我把這個JavaScript在我的JavaScript模板，它的工作原理，但這不是很漂亮。

var poll_total = []; 
    $(".yop-poll-answers ul li:not(:last-child)").each(function(index) { 
     var lab_value = $(this).find("label").text(); 
     var span_value = parseInt($(this).find("span").text().replace (/[^\d.]/g, '')); 
     var poll_couple = []; 
     poll_couple.length = 0; 
     poll_couple.push(lab_value); 
     poll_couple.push(span_value); 
     poll_total.push(poll_couple); 
    }); 

     var series_update = []; 
    $('.yop_poll_vote_button').click(function() { 
     var chart_update = $('#container').highcharts(); 
     $(".yop-poll-answers ul li").each(function(index) { 
     var span_value_update = parseInt($(this).find("span").text().replace (/[^\d.]/g, '')); 
       chart.series[0].data[index].update({ 
        y: span_value_update 
       }); 
    }); 
    }); 


    var colors = [ '#c5071b', '#a77eb1', '#a91a31','#8c6994', '#b05b85' ]; 
    Highcharts.setOptions({ 
      colors: colors, 
      chart: { 
       style: { 
        fontFamily: 'Arial' 
       } 
      } 
    }); 
     Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) { 
      return { 
       radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 }, 
       stops: [ 
        [0, color], 
        [1, Highcharts.Color(color).brighten(-0.1).get('rgb')] 
       ] 
      }; 
     }); 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      type: 'pie' 
     }, 
     legend: { 
      layout : 'vertical', 
      borderColor : '', 
      itemMarginBottom: 30, 
      itemStyle: { 
       cursor: 'pointer', 
       color: '#666666', 
       fontSize: '12px', 
       width:'200px', 
      } 
     }, 
     tooltip:{ 
      enabled:false 
     }, 
     title:{ 
      text:'' 
     }, 
     plotOptions: { 
      pie: { 
       innerSize: '50%', 
       dataLabels: { 
        connectorWidth: 0, 
        connectorPadding: 0, 
        distance: 10, 
        style: { 
         fontWeight:'bold' 
        }, 
        formatter: function() { 
         return '<span style="color:'+colors[this.point.x]+';">'+ Math.round(this.percentage) +'%</span>'; 
        },    
       }, 
       showInLegend: true 
      } 
     }, 
     credits: { 
     enabled: false 
     }, 
     series: [{ 
      data: poll_total 
     }] 
    }); 



function stripBorder_%POLL-ID%(object) { 
    object.each(function() { 
     if(parseInt(jQuery(this).width()) > 0) { 
      jQuery(this).width( 
       parseInt( 
        jQuery(this).width()) - 
        parseInt(jQuery(this).css("border-left-width")) - 
        parseInt(jQuery(this).css("border-right-width")) 
      ); 
      } 
     else { 
     jQuery(this).css("border-left-width", "0px"); 
     jQuery(this).css("border-right-width", "0px"); 
     } 
    }); 
} 
function stripPadding_%POLL-ID%(object) { 
    object.each(function() { 
     jQuery(this).width( 
     parseInt(jQuery(this).width()) - 
     parseInt(jQuery(this).css("padding-left")) - 
     parseInt(jQuery(this).css("padding-left")) 
     ); 
    }); 
} 

function strip_results_%POLL-ID%() { 
    stripPadding_%POLL-ID%(jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%")); 
    stripBorder_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%")); 
} 

jQuery(document).ready(function(e) { 
    if(typeof window.strip_results_%POLL-ID% == "function") 
     strip_results_%POLL-ID%(); 
    if(typeof window.tabulate_answers_%POLL-ID% == "function") 
     tabulate_answers_%POLL-ID%(); 
    if(typeof window.tabulate_results_%POLL-ID% == "function") 
     tabulate_results_%POLL-ID%(); 
}); 

function equalWidth_%POLL-ID%(obj, cols, findWidest) { 
    findWidest = typeof findWidest !== "undefined" ? findWidest : false; 
    if (findWidest) { 
     obj.each(function() { 
      var thisWidth = jQuery(this).width(); 
      width = parseInt(thisWidth/cols); 
      jQuery(this).width(width);  
      jQuery(this).css("float", "left");  
     }); 
    } 
    else { 
     var widest = 0; 
     obj.each(function() { 
      var thisWidth = jQuery(this).width(); 
      if(thisWidth > widest) { 
       widest = thisWidth; 
      }  
     }); 
     width = parseInt(widest/cols); 
     obj.width(width);  
     obj.css("float", "left");  
    }  
} 

function tabulate_answers_%POLL-ID%() { 
    equalWidth_%POLL-ID%(jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS%); 
    //equalWidth_%POLL-ID%(jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true); 
} 

function tabulate_results_%POLL-ID%() { 
    equalWidth_%POLL-ID%(jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS%); 
    //equalWidth_%POLL-ID%(jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true); 
    } 

jQuery(document).ready(function(){ 
    runOnPollStateChange_%POLL-ID%(); 
}); 

function runOnPollStateChange_%POLL-ID%() { 

};