javascript - 谷歌图表绘制不需要的值

Question

我的网页中有一个 Google 图表，绘制了用户输入的值(结果 1 和结果 2)。
我无法删除值[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'，而不是实际的变量值

这个
['结果1','结果2']

应该是
[结果1，结果2]

接下来，输入字段值需要转换为数字。
您可以使用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>