javascript - Google 图表错误 - 不会显示第二个图表

Question

我正在尝试在我的页面中集成多个图表，但只有第一个有效。

JS代码如下:

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

function drawChart_total() {
var fixed_costs = document.getElementById('total_fixed_costs').value;
var variable_costs = document.getElementById('total_variable_costs').value;
var salary = document.getElementById('total_salary').value;     

var data = new google.visualization.DataTable();
data.addColumn('string','Cost Type');
data.addColumn('number','Spendings');
data.addRows
([
   ['Fixed Costs', parseFloat(fixed_costs)],
   ['Variable Costs', parseFloat(variable_costs)],
   ['Salary', parseFloat(salary)]
]);
var options = {title: 'Total costs distribution chart', width: 600, height: 333};
var chart = new google.visualization.PieChart(document.getElementById('piechart_total'));
chart.draw(data, options);
}

function drawChart_fixed() {
var truck_payment = document.getElementById('truck_payment').value;
var collision_comp_insurance =  document.getElementById('collision_comp_insurance').value;
var office_lease = document.getElementById('office_lease').value;   
var health_insurance = document.getElementById('health_insurance').value;   
var permits = document.getElementById('permits').value;

var data = new google.visualization.DataTable();
data.addColumn('string', 'Cost Type');
data.addColumn('number', 'Spendings');
data.addRows
([
   ['Truck Payment', parseFloat(truck_payment)],
   ['Collision / Comp Insurance', parseFloat(collision_comp_insurance)],
   ['Office Lease', parseFloat(office_lease)]
   ['Health Insurance', parseFloat(health_insurance)],
   ['Permits', parseFloat(permits)]
]);
var options = {title: 'Fixed costs distribution chart', width: 600, height: 333};
var chart = new google.visualization.PieChart(document.getElementById('piechart_fixed'));
chart.draw(data, options);
}

数据取自表单。第一个图表的表单字段的 HTML 标记如下所示:

<input name="total_fixed_costs" id="total_fixed_costs" placeholder="Total" value=0 readonly>

第二张图是这样的:

<input type="number" min=0 id="permits" name="permits" placeholder="Write Here">

就第二张图而言，如果我保持原样，则会出现以下错误:

jsapi_compiled_default_module.js:36 未捕获错误:给定的每一行必须为 null 或数组。

另一方面，如果我不对填充数据表第二列的变量使用 parseFloat，则会收到以下错误:

jsapi_compiled_default_module.js:14 未捕获错误:类型不匹配。值与列索引 1 中的类型编号不匹配

这两天我一直在寻找解决方案，但没有成功。我想说的是，我是编程世界的新手，目前正在学习 JS。我还没有接触过JQuery。

谢谢。

Answer 1

首先，有一个拼写错误...

保持原样，即使用 parseFloat

并且

在此行末尾添加一个逗号 ( , )...

['Office Lease', parseFloat(office_lease)], // <-- add comma

另外，不建议使用 setOnLoadCallback不止一次

您可以包含 callback在 load声明，
然后从那里调用“draw”函数

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    drawChart_total();
    drawChart_fixed();
  },
  packages:['corechart']
});

function drawChart_total() {
  var fixed_costs = document.getElementById('total_fixed_costs').value;
  var variable_costs = document.getElementById('total_variable_costs').value;
  var salary = document.getElementById('total_salary').value;

  var data = new google.visualization.DataTable();
  data.addColumn('string','Cost Type');
  data.addColumn('number','Spendings');
  data.addRows
  ([
     ['Fixed Costs', parseFloat(fixed_costs)],
     ['Variable Costs', parseFloat(variable_costs)],
     ['Salary', parseFloat(salary)]
  ]);
  var options = {title: 'Total costs distribution chart', width: 600, height: 333};
  var chart = new google.visualization.PieChart(document.getElementById('piechart_total'));
  chart.draw(data, options);
}

function drawChart_fixed() {
  var truck_payment = document.getElementById('truck_payment').value;
  var collision_comp_insurance =  document.getElementById('collision_comp_insurance').value;
  var office_lease = document.getElementById('office_lease').value;
  var health_insurance = document.getElementById('health_insurance').value;
  var permits = document.getElementById('permits').value;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Cost Type');
  data.addColumn('number', 'Spendings');
  data.addRows
  ([
     ['Truck Payment', parseFloat(truck_payment)],
     ['Collision / Comp Insurance', parseFloat(collision_comp_insurance)],
     ['Office Lease', parseFloat(office_lease)],
     ['Health Insurance', parseFloat(health_insurance)],
     ['Permits', parseFloat(permits)]
  ]);
  var options = {title: 'Fixed costs distribution chart', width: 600, height: 333};
  var chart = new google.visualization.PieChart(document.getElementById('piechart_fixed'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>
  <input type="number" id="total_fixed_costs" value="500" readonly />
  <input type="number" id="total_variable_costs" value="1500" readonly />
  <input type="number" id="total_salary" value="50000" readonly />
</div>
<div id="piechart_total"></div>

<div>
  <input type="number" id="truck_payment" value="400" />
  <input type="number" id="collision_comp_insurance" value="30" />
  <input type="number" id="office_lease" value="800" />
  <input type="number" id="health_insurance" value="100" />
  <input type="number" id="permits" value="20" />
</div>
<div id="piechart_fixed"></div>