Google 饼图无法正确显示切片答案

【问题标题】：Google Pie Chart does not display properly the slicesGoogle 饼图无法正确显示切片
【发布时间】：2013-12-06 11:01:24
【问题描述】：

如下图所示，我的网页中有很多饼图，它们并没有完全填满容器（通常只有一半被填满或更少）：

这里有一些代码：

        var data1 = google.visualization.arrayToDataTable([
            ['Tipo', 'Valore'],
            ['Recapitate', sent],
            ['Ritornate/Bloccate', errors]
        ]);

        options1 = {
            width: 250,
            height: 250,
            pieHole: 0.5,
            colors: ['#06dd00','#e12a00'],
            legend: {position: 'none'},
            pieSliceText: 'none',
            tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
            chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
            enableInteractivity: false/*,
            animation: { duration: 1000, easing: 'out' }*/
        };

        chart1 = new google.visualization.PieChart(document.getElementById('grafico-inviate'));
        chart1.draw(data1, options1);

        var data2 = google.visualization.arrayToDataTable([
            ['Tipo', 'Valore'],
            ['Aperte', unique_opened],
            ['Non aperte', combined1]
        ]);

        options2 = {
            width: 250,
            height: 250,
            pieHole: 0.5,
            colors: ['#3e9ca8','#ff5932'],
            legend: {position: 'none'},
            pieSliceText: 'none',
            tooltip: {textStyle: {color: '#333', fontName: 'Arial', fontSize: 16}},
            chartArea:{left: 0,top: 0,width: "100%",height: "100%"},
            enableInteractivity: false/*,
            animation: { duration: 1000, easing: 'out' }*/
        };

        chart2 = new google.visualization.PieChart(document.getElementById('grafico-aperte'));
        chart2.draw(data2, options2);

该问题独立于操作系统/Web 浏览器而出现。我不知道这是可视化 API 的错误还是我遗漏了什么？

已解决！！：

不要问我为什么，但如果我按以下方式放置数据（使用 javascript Number() 函数）它可以工作：

        var data2 = google.visualization.arrayToDataTable([
            ['Tipo', 'Valore'],
            ['Aperte', Number(unique_opened)],
            ['Non aperte', Number(combined1)]
        ]);

【问题讨论】：

你能用 hmml 标记和样式展示你的完整文件吗？
很可能您没有为图表提供足够的空间。使用您的代码并定义缺少的变量，我得到了两个饼图。
一个问题：在控制台中，如果您向下钻取元素，您将到达其中一个馅饼的svg 元素。每个<svg>...</svg> 对是一个饼图的定义。如果您只是剪切并粘贴一个 svg 标记以将 html 页面分隔到正文部分，您会得到什么？整个派还是半个派？
顺便说一句：你为这两个饼图使用了pieStartAngle 选项吗？
仅供参考，如果您的变量包含字符串，则必须转换为 Number，因为 Visualization API 处理数字和字符串的方式非常不同（当您尝试将字符串用于数字时，会产生一些奇怪的效果，正如你在饼图上看到的那样）。

标签： javascript google-api google-visualization pie-chart

【解决方案1】：

我不知道这是否是您的情况，但您可以通过以下方式生成这样的半圆。你的代码变化不大（只有第二部分）：

var unique_opened = 5.555; // real value: 11.11;
var combined1 = 44.445;  //   real value: 88.89;
var noshow = 50;

....
    var data2 = google.visualization.arrayToDataTable([
        ['Tipo', 'Valore'],
        ['Aperte', unique_opened],
        ['Non aperte', combined1],
        ['noshow', noshow]
    ]);

    options2 = {
        width: 250,
        height: 250,
        pieHole: 0.5,
        colors: ['#3e9ca8','#ff5932', '#ffffff'],
    ...

你会得到：

Javier González的想法

【讨论】：