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：如何从单选按钮图形

回答

相关问题