Javascript 谷歌图表饼图始终显示100%_Javascript_Charts_Google Visualization

Javascript 谷歌图表饼图始终显示100%

javascript charts google-visualization

Javascript 谷歌图表饼图始终显示100%,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,我使用下面的代码来绘制一个图表。问题是它总是显示一个完整的圆圈。该代码对于折线图（注释）工作良好。我使用的数据格式在某种程度上是错误的吗加载（“可视化”，“1”{ 软件包：[“corechart”] }); setOnLoadCallback（drawChart）；函数绘图图（）{ var json_data=new google.visualization.DataTable（{“cols”：[{“label”：“Class”，“type”：“string”}，{“label”：“Dea

我使用下面的代码来绘制一个图表。问题是它总是显示一个完整的圆圈。该代码对于折线图（注释）工作良好。我使用的数据格式在某种程度上是错误的吗


加载（“可视化”，“1”{
软件包：[“corechart”]
});
setOnLoadCallback（drawChart）；
函数绘图图（）{
var json_data=new google.visualization.DataTable（{“cols”：[{“label”：“Class”，“type”：“string”}，{“label”：“Deals”，“type”：“number”}]，“rows”：[{“c”：[{“v”：“Heavy”，“f”：null}，{“v”：“v”：“5”，“f”：null}，{“v”：“Medium”，“f”：null}，{“v”：“101”，“f”：null}，{“v”：“f”：null}，{“v”：“v”：“v”：“v”：“f”：Light；
//var chart=new google.visualization.LineChart（document.getElementById（'donutchart'）；
var chart=new google.visualization.PieChart（document.getElementById（'donutchart'）；
变量选项={
标题：“”，
图表区：{
左:40,，
前10名，
宽度：“90%”，
身高：“80%”
},
图例：{
位置：“无”
},
颜色：['#468ba9'，“#67696c”]，
pieHole:0.4，
};
绘制（json_数据、选项）；
}

编辑：我需要一个包含json数据的解决方案，因为我无法更改为输入数据，这是因为你试图欺骗谷歌

我刚刚将您的数据更改为更简单的集合。此外，我还冒昧地为您的第三个馅饼添加了一种额外的颜色

<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>


加载（“可视化”，“1”{
软件包：[“corechart”]
});
setOnLoadCallback（drawChart）；
函数绘图图（）{
var json_data=google.visualization.arrayToDataTable([
['Class'，'Deals']，
[‘重’，5]，
['Medium'，101]，
[Light'，18]
]);
var chart=new google.visualization.PieChart（document.getElementById（'donutchart'）；
变量选项={
标题：“”，
图表区：{
左:40,，
前10名，
宽度：“90%”，
身高：“80%”
},
图例：{
位置：“无”
},
颜色：['#468ba9'、“#67696c”、“#6cc96c”]，
pieHole:0.4，
};
绘制（json_数据、选项）；
}

根据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}]}]}

JS Fiddle:

嗨，你能详细解释一下你所说的谷歌把戏是什么意思吗？我实际上需要一个包含json数据的解决方案。@SNAG-您的数字值在引号中，所以它们实际上是字符串值。e、 g.您有“v”：“5”，但应该是“v”：5@dlaliberte你真棒！这就是问题所在。如果你将此作为答复，我将接受it@SNAG那只是为了幽默，伙计。没什么冒犯的：）

{"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}]}]}