Порядок оси Google Графики - PullRequest
Новая
       26

Порядок оси Google Графики

0 голосов
/ 30 сентября 2018

У меня есть простая форма ввода, которую пользователь будет использовать для ввода данных с помощью выпадающего списка / селекторов.Есть 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>

1 Ответ

0 голосов
/ 01 октября 2018

данные по оси 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= не требуется ...

...