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>