Google圖表繪製不需要的值

Question

我在我的網頁上繪製了一個Google圖表，繪製了用戶輸入的值（result1和result2）。我不能刪除值[0,0]。如果我這樣做，圖表不會渲染，但是如果我將它們留下，則在x和y軸的0點上會有一個繪圖點。
我需要的只是圖表繪製[result1, result2]

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')); 
} 

Answer 1

有幾個問題...

第一，價值'result1'和'result2'正在使用，而不是實際的變量值

此
['result1', 'result2']

應該是
[result1, result2]

接下來，需要將輸入字段值轉換爲數字。
可以使用parseFloat
parseFloat(document.getElementById('finalScore').value)

記住，如果輸入比許多其他的東西，你會得到一個錯誤
使用isNaN覈實數這些更改後

，不需要[0, 0]

看到下面的工作片段...

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>