我正在使用以下代码来绘制饼图。问题是它总是显示一个完整的圆圈。该代码适用于折线图(已注释)。我使用的数据格式是否有问题？ JSFiddle here
<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 数据的解决方案，因为我无法更改输入数据
最佳答案
根据 dlaliberte 的评论，虽然我已声明“Deals”为数字类型，但传递的数据为字符串类型。
因此
{"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 fiddle :http://jsfiddle.net/Hzr47/2/
关于javascript - Google Charts 饼图始终显示 100%，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23830144/