Google 차트 오류 - 두 번째 그래프를 표시하지 않습니다.

Question

내 페이지에 두 개 이상의 차트를 통합하려고하지만 첫 번째 차트 만 통합하려고합니다.

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

데이터는 형태로 촬영된다

JS 코드는 다음과 같다.

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

두 번째 그래프 사람은 다음과 같습니다 : 첫 번째 그래프 양식 필드에 대한 HTML 태그는 다음과 같이 있습니다

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

지금까지 두 번째 그래프는, 경우에 간다 나는 그대로두고, 나는 다음과 같은 오류가 발생한다 :

jsapi_compiled_default_module.js : 36 알려지지 않은 오류 : 주어진 모든 행은 널 또는 배열이어야한다. 한편

, 나는 데이터 테이블의 두 번째 열을 채우는 변수에에서는 parseFloat를 사용하지 않는 경우, 나는 다음과 같은 오류 얻을 :

jsapi_compiled_default_module.js : 14 catch되지 않은 오류 : 유형 불일치. 값이 열 인덱스 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 헤드를 변경했다 : 구글 차트 웹 사이트에있는 지시 사항에 따라 (같은 페이지에 여러 차트를 표시하기위한)

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

, 나는 처음에 첫 번째 행을했다.

이제는 매력처럼 작동합니다.