2016-07-27 7 views
1

Ich habe ein Google-Diagramm in meiner Webseite, die Werte zeichnet, die der Benutzer eingibt (result1 und result2). Ich kann die Werte [0,0] nicht löschen. Wenn ich das tue, wird das Diagramm nicht gerendert, aber wenn ich sie belasse, gibt es einen Diagrammpunkt auf dem 0-Punkt in der X- und Y-Achse.
Ich brauche das Diagramm nur [result1, result2]Google-Diagramm unerwünschte Werte aufzeichnen

google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(drawChart); 

function drawChart() { 
    "use strict"; 
    var result1 = document.getElementById('finalScore').value; 
    var result2 = document.getElementById('finalScoreD').value; 

    var data = google.visualization.arrayToDataTable([ 
    ['Quality', 'Delivery'], 
    [ 0, 0], 
    [ 'result1', 'result2'] 
    ]); 

    var options = { 
    title: '', 
    hAxis: {title: 'Quality', minValue: 0, maxValue: 1, gridlines: { count: 3, color: '#000000' }, titleTextStyle: {italic: false}}, 
    vAxis: {title: 'Delivery', minValue: 0, maxValue: 1, gridlines: { count: 3, color: '#000000'}, titleTextStyle: {italic: false}}, 
    width: 370, 
    height: 300, 
    colors: ['#6db33f'], 
    pointSize: 30, 
    pointShape: 'circle', 
    fontName: 'proximaNovaLight', 
    fontSize: '15', 
    backgroundColor: { fill:'transparent' }, 
    legend: 'none', 
    }; 

    var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
} 

Antwort

0

dort zu plotten gibt ein paar Probleme ...

zuerst die Werte 'result1' und 'result2' verwendet werden, anstatt die tatsächliche Variable

Werte diese
['result1', 'result2']

solltesein 0 [result1, result2]

Als nächstes müssen die Eingabefeldwerte in Zahlen umgewandelt werden.
können Sie verwenden parseFloat
parseFloat(document.getElementById('finalScore').value)

im Auge zu behalten, wenn etwas anderes als eine Zahl eingegeben wird, könnte ein Fehler
Verwendung isNaN erhalten die Nummer

nach diesen Änderungen zu überprüfen, wird [0, 0] nicht erforderlich

siehe folgende Arbeits Schnipsel ...

google.charts.load('current', { 
 
    callback: function() { 
 
    "use strict"; 
 

 
    document.getElementById('drawFinalScore').addEventListener('click', drawChart, false); 
 
    drawChart(); 
 

 
    function drawChart() { 
 
     var result1 = parseFloat(document.getElementById('finalScore').value); 
 
     if (isNaN(result1)) { 
 
     result1 = 0; 
 
     } 
 
     var result2 = parseFloat(document.getElementById('finalScoreD').value); 
 
     if (isNaN(result2)) { 
 
     result1 = 0; 
 
     } 
 

 
     var data = google.visualization.arrayToDataTable([ 
 
     ['Quality', 'Delivery'], 
 
     [result1, result2] 
 
     ]); 
 

 
     var options = { 
 
     title: '', 
 
     hAxis: {title: 'Quality', minValue: 0, maxValue: 1, gridlines: { count: 3, color: '#000000' }, titleTextStyle: {italic: false}}, 
 
     vAxis: {title: 'Delivery', minValue: 0, maxValue: 1, gridlines: { count: 3, color: '#000000'}, titleTextStyle: {italic: false}}, 
 
     width: 370, 
 
     height: 300, 
 
     colors: ['#6db33f'], 
 
     pointSize: 30, 
 
     pointShape: 'circle', 
 
     fontName: 'proximaNovaLight', 
 
     fontSize: '15', 
 
     backgroundColor: { fill:'transparent' }, 
 
     legend: 'none', 
 
     }; 
 

 
     var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
 
     chart.draw(data); 
 
    } 
 
    }, 
 
    packages: ['corechart'] 
 
});
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<input id="finalScore" type="text" value="1" /> 
 
<input id="finalScoreD" type="text" value="1" /> 
 
<input id="drawFinalScore" type="button" value="Draw" /> 
 
<div id="chart_div"></div>

+0

Funktioniert wie ein Charme, danke! – invincibleme