Question

我有一个简单的输入表单，用户可以使用它通过下拉列表/选择器输入数据。共有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>

Answer 1

y轴上的数据混乱，因为在图表数据中使用了string值，
而不是number值

要更正，您可以使用parseInt将字符串转换为数字。

          [" ", 
          parseInt(document.getElementById("DB").value), 
          parseInt(document.getElementById("RLV").value),
          parseInt(document.getElementById("PRV").value),
          parseInt(document.getElementById("PSN").value), 
          parseInt(document.getElementById("CNS").value),
          parseInt(document.getElementById("BP").value),
          parseInt(document.getElementById("MA").value), 
          parseInt(document.getElementById("BM").value),
          parseInt(document.getElementById("SOB").value),
          parseInt(document.getElementById("BE").value)],

请参阅以下工作片段...

<!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'],
          [" ", 
          parseInt(document.getElementById("DB").value), 
          parseInt(value=document.getElementById("RLV").value),
          parseInt(value=document.getElementById("PRV").value),
          parseInt(value=document.getElementById("PSN").value), 
          parseInt(value=document.getElementById("CNS").value),
          parseInt(value=document.getElementById("BP").value),
          parseInt(value=document.getElementById("MA").value), 
          parseInt(value=document.getElementById("BM").value),
          parseInt(value=document.getElementById("SOB").value),
          parseInt(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>

注意：不需要value= ...

Google Graphs轴顺序

1 个答案: