我正在尝试在我的页面中集成多个图表,但只有第一个图表有效。
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。
谢谢。
答案 0 :(得分:1)
首先,有一个错字......
保持原样,即使用parseFloat
和
在此行的末尾添加逗号(,
)...
['Office Lease', parseFloat(office_lease)], // <-- add comma
, 建议不止一次使用setOnLoadCallback
您可以在callback
声明中加入load
然后打电话给&#34;画&#34;那里的功能
请参阅以下工作代码段...
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);
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
非常感谢你!
那个错字是我的死。我一遍又一遍地看着但没有看到它。我还根据你的指示修改了图表脚本的第一部分。
我不得不将HTML头改为:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
根据Google Chart网站上的说明(在同一页面上显示多个图表),我最初只有第一行。
现在它就像一个魅力:)