谷歌圖表錯誤 - 不會顯示第二個圖表

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不止一次

可以包括在load聲明callback，
然後調用從那裏

「畫」功能見以下工作片段...

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>

Answer 2

非常感謝你！

錯字是我的死亡。我一遍又一遍地看，但沒有看到它。根據您的指示，我還修改了圖表腳本的第一部分。

我不得不把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> 

按照谷歌的圖表網站上找到的指令（在同一頁上顯示多個圖表），我最初只有第一排。

現在它像一個魅力:)