gpt4 book ai didi

javascript - Highcharts : How to graph from Radio Button

转载 作者:行者123 更新时间:2023-12-02 15:11:03 26 4
gpt4 key购买 nike

作为 JavaScript 和 Highcharts 的新手,我需要帮助。示例或文档引用将非常有帮助。因此,我想做的是创建一个包含约 10 个问题的调查,并以单选按钮格式提供"is"、“否”和“两者”等答案。

当用户选择这些答案时,我希望将其绘制成图表,通过环顾四周,我相信 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>

最佳答案

将是、否以及两者存储在 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]
}]
});
});

关于javascript - Highcharts : How to graph from Radio Button,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34801715/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com