Google圖表餅圖始終顯示100％
[英]Google Charts Pie Chart always showing 100%
問題描述
我正在使用以下代碼繪制一個餅圖。 問題是它總是顯示一個完整的圓圈。 該代碼對於折線圖正常工作（有注釋）。 我使用的數據格式某種程度上是否錯誤？ JSFiddle在這里
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var json_data = new google.visualization.DataTable('{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":"5","f":null}]},{"c":[{"v":"Medium","f":null},{"v":"101","f":null}]},{"c":[{"v":"Light","f":null},{"v":"18","f":null}]}]}');
//var chart = new google.visualization.LineChart(document.getElementById('donutchart'));
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
var options = {
title: '',
chartArea: {
left: 40,
top: 10,
width: "90%",
height: "80%"
},
legend: {
position: "none"
},
colors: ['#468ba9', "#67696c"],
pieHole: 0.4,
};
chart.draw(json_data, options);
}
</script>
<body>
<div id="donutchart" style="width: 300px; height: 300px;"></div>
</body>
編輯：我將需要與json數據的解決方案，因為我不能更改為輸入數據
2 個解決方案
解決方案1
1 已采納 2015-01-06 07:31:41
根據dlaliberte的評論，盡管我已將“ Deals”聲明為number類型，但傳遞的數據卻是string類型。
從而
{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":"5","f":null}]},{"c":[{"v":"Medium","f":null},{"v":"101","f":null}]},{"c":[{"v":"Light","f":null},{"v":"18","f":null}]}]}
應該成為
{"cols":[{"label":"Class","type":"string"},{"label":"Deals","type":"number"}],"rows":[{"c":[{"v":"Heavy","f":null},{"v":5,"f":null}]},{"c":[{"v":"Medium","f":null},{"v":101,"f":null}]},{"c":[{"v":"Light","f":null},{"v":18,"f":null}]}]}
JS小提琴： http : //jsfiddle.net/Hzr47/2/
解決方案2
0 2014-05-23 13:29:34
這是因為您試圖欺騙Google！
我只是將您的數據更改為更簡單的集合。 另外，在這種情況下，我可以自由地為您的第三個派添加一種額外的顏色。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var json_data = google.visualization.arrayToDataTable([
['Class', 'Deals'],
['Heavy', 5],
['Medium', 101],
['Light', 18]
]);
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
var options = {
title: '',
chartArea: {
left: 40,
top: 10,
width: "90%",
height: "80%"
},
legend: {
position: "none"
},
colors: ['#468ba9', "#67696c", "#6cc96c"],
pieHole: 0.4,
};
chart.draw(json_data, options);
}
</script>
<body>
<div id="donutchart" style="width: 300px; height: 300px;"></div>
</body>
Google Charts餅圖顯示其他100％而非實際值
[英]Google Charts Pie chart displaying Other 100% rather than actual values
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.