Highchart：如何從單選按鈕圖形

是JavaScript和Highcharts的新手，我需要幫助。文檔的示例或參考將非常有用。因此，我想要做的是創建一個關於10個問題的調查問卷，其中包括是，否和全都採用單選按鈕格式。Highchart：如何從單選按鈕圖形

當用戶選擇這些答案時，我希望它被繪製出來，並且環顧四周，我相信Highcharts似乎是最整潔的圖書館。

我該如何做到這一點？

綜上所述，用戶選擇的問題的答案，而當他們按「提交」按鈕，代碼應該算多少是，否，無一不有，繪製一個條形圖。

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
<script src="http://code.highcharts.com/modules/drilldown.js"></script> 

<body> 

<form action="first question"> 
<p>Would you choose an Apple?</p> 
    <input type="radio" name="Q1" value="yes"> Yes<br> 
    <input type="radio" name="Q1" value="no"> No<br> 
    <input type="radio" name="Q1" value="other"> Both 
</form> 

<form action="second question"> 
<p>Would you choose a Banana?</p> 
    <input type="radio" name="Q2" value="yes"> Yes<br> 
    <input type="radio" name="Q2" value="no"> No<br> 
    <input type="radio" name="Q2" value="other"> Both 
</form> 

</body> 

<button type = button> Submit </button>

來源

2016-01-14 axchink

存儲您的yes，no和yesCount，noCount，bothCount。給你的是，不，這是一個單獨的標識符，所以你可以選擇全部，並看看有多少具有檢查屬性。

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Yes/No' 
     }, 
     subtitle: { 
      text: 'Subtitle Here' 
     }, 
     xAxis: { 
      categories: ['Votes'], 
      title: { 
       text: null 
      } 
     }, 
     yAxis: { 
      min: 0, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: -40, 
      y: 80, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Yes', 
      data: [yesCount] 
     }, { 
      name: 'No', 
      data: [noCount] 
     },{ 
      name: 'Both', 
      data: [bothCount] 
     }] 
    }); 
});

來源

2016-01-14 23:36:49

請問是否可以提供一個jsfiddle小提琴或代碼片段的例子 – axchink

Highchart：如何從單選按鈕圖形

回答

相關問題