Googleグラフのエラー - 2番目のグラフが表示されません

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); 
} 

データがフォームから採取されます。

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

と2番目のグラフのためのものは、このようなものです：最初のグラフのフォームフィールドの HTMLタグはこのようなものです

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

限り2番目のグラフは、場合行くように私はそれをそのまま残して、私は次のエラーが発生します：

jsapi_compiled_default_module.js：36キャッチされていないエラー：すべての行はnullまたは配列のいずれかでなければなりません。一方

、私はデータテーブルの2番目の列を移入変数にparseFloatはを使用しない場合、私は次のエラーを取得：

jsapi_compiled_default_module.js：14不明なエラーを：タイプミスマッチ。値が列インデックス1のタイプ番号と一致しません

私はこの2日間の解決方法を探していましたが、成功しませんでした。私はプログラミングの世界で初心者で、現在JSを学んでいることを言及したいと思います。私はまだJQueryと接触していませんでした。

ありがとうございます。

Answer 1

最初、入力ミスがあるよう

この行の末尾にコンマ（,）を追加parseFloat

AND

使用を意味する、それを残す...あります...

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

も、それはあなたがload文でcallback、
は、次の作業を参照してくださいが

から関数を「描く」と呼ぶ含めることができ

回setOnLoadCallback以上を使用することをお勧めしないですスニペット...

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のヘッドを変更する必要がありました。（同じページに複数のグラフを表示するための）Googleのチャートのウェブサイト上で見つける指示に従って、私は当初、最初の行だけを持っていたとして

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

。

これは魅力のように機能します:)