Question

是JavaScript和Highcharts的新手，我需要帮助。文档的示例或参考将非常有用。因此，我要做的是创建一个大约10个问题的调查，其答案包括，是，否和两者都是无线电按钮格式。

当用户选择这些答案时，我希望将其绘制成图，并且从环顾四周来看，我相信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>

Answer 1

将yes，no和both存储在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]
        }]
    });
});

Highchart：如何从Radio Button绘图

1 个答案: