【发布时间】：2018-09-30 17:04:10
【问题描述】：
我有一个简单的输入表单，用户可以使用它通过下拉/选择器输入数据。有 10 个问题，每个问题的评分为 10。
然后，此数据会在同一页面上填充 Google 图表。
数据很好地填充了图表，但轴本身变得无序。所以 2 可能在顶部，10 在中间，依此类推。我不知道为什么轴会这样“断裂”。
请注意，我对 Java 和一点 HTML 的经验很少，这只是我试图学习但无法在任何地方找到答案，或者至少，当我看到它时无法识别答案！
有人可以帮忙吗？
<!doctype HTML>
<html`enter code here` lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
<style>
</style>
</head>
<body>
<h1>REPORT CARD</h1>
<br>
<form role="form" id="price" name="price">
<p><b>The brand excels</b></p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey; float:right;" id="DB" onchange="drawChart()">
<option id="itemprice" color="green" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
<br>
<p>Relevance:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="RLV" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Pricing related to Value:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey ;float:right" id="PRV" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Positioning:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px; color:grey;float:right" id="PSN" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Consistency:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="CNS" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Portfolio:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BP" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Marketing Activities:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="MA" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Meaning:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="BM" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Support of the Brand:</p>
<select class="custom-select" style="width:100pt; height:30pt; font-size:15px;color:grey;float:right " id="SOB" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
<br>
<p>Brand Equity:</p>
<select class="custom-select" style="width:100pt; height:30pt; text-align: center; font-size:15px;color:grey;float:right " id="BE" onchange="drawChart()">
<option id="itemprice" value="">Please choose</placeholder>
<option id="itemprice" value="1" >1 </option>
<option id="itemprice" value="2">2</option>
<option id="itemprice" value="3">3</option>
<option id="itemprice" value="4">4</option>
<option id="itemprice" value="5">5</option>
<option id="itemprice" value="6">6</option>
<option id="itemprice" value="7">7</option>
<option id="itemprice" value="8">8</option>
<option id="itemprice" value="9">9</option>
<option id="itemprice" value="10">10</option>
</select>
</p>
</form>
<br> </br><br> </br>
</body>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Metrics','Delivering Benefits','Relevance', 'Pricing related to Value','Positioning','Consistency', 'Brand Portfolio','Marketing Activities','Brand Meaning', 'Support of the Brand', 'Brand Equity'],
[" ",
value=document.getElementById("DB").value,
value=document.getElementById("RLV").value,
value=document.getElementById("PRV").value,
value=document.getElementById("PSN").value,
value=document.getElementById("CNS").value,
value=document.getElementById("BP").value,
value=document.getElementById("MA").value,
value=document.getElementById("BM").value,
value=document.getElementById("SOB").value,
value=document.getElementById("BE").value,],
]);
var options = {
chart: {
title: 'XYZ',
subtitle: '',
},
bars: 'vertical' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="barchart_material" style="width: 1000px; height: 500px;"></div>
</body>
</html>【问题讨论】：
标签： javascript html charts google-visualization bar-chart