Question

我使用以下代码绘制饼图。问题是它总是显示一个完整的圆圈。该代码适用于折线图（注释）。某种程度上我使用的数据格式是错误的吗？ 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数据的解决方案，因为我无法更改为输入数据

Answer 1

根据dlaliberte的评论，尽管我已宣布＆＃34; Deals＆＃34;如果是类型编号，则传递的数据是字符串类型。

因此

{"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/

Answer 2

这是因为你试图欺骗谷歌!!

我刚刚将您的数据更改为更简单的集合。另外，在这种情况下，我冒昧地为你的第三个馅饼添加了一个额外的颜色。

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

2 个答案: