【问题标题】:Google Chart API - Pie Chart Stroke options not taking affectGoogle Chart API - 饼图描边选项不生效
【发布时间】:2011-07-08 09:35:35
【问题描述】:

我正在使用 Google 饼图 API。

一切正常,除了 stroke: 和 strokeWidth: 的选项。无论我将它们设置为什么,都没有任何变化。

我的背景颜色很深,切片之间的线条是白色的。我正在尝试将它们更改为与背景相同的颜色。我也不能改变这些线条的宽度。

这是我的代码:

<script src="https://www.google.com/jsapi"></script>
<script>

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(5);
    data.setValue(0, 0, 'Work');
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 2);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 2);
    data.setValue(4, 0, 'Sleep');
    data.setValue(4, 1, 7);

    // Create and draw the visualization.
    new google.visualization.PieChart(document.getElementById('poll-chart')).
    draw(data, {

        title:"",
        fontSize: "12",
        legend: "none",
        width: 200,
        height: 200,
        chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
        backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" }

    });
}

</script>

我正在通过此页面上的选项引用 Google API:

http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Configuration_Options

我不确定我是否做错了什么。

非常感谢您的帮助或指导!

谢谢, 迈克尔。

编辑:

好吧,看来我搞砸的属性与整个图表的外部笔划有关,而不是每个切片。我仍然被困住了。有谁知道我怎样才能关闭切片之间的白色间隙?我在 Google 上找不到任何关于此的内容。

【问题讨论】:

    标签: google-visualization pie-chart


    【解决方案1】:

    使用pieSliceBorderColor。自从提出此问题以来,可能已添加此内容,但对于将来的任何参考,这就是您的操作方式。注意:这仅适用于 2D 饼图

    new google.visualization.PieChart(document.getElementById('poll-chart')).
        draw(data, {
    
            title:"",
            fontSize: "12",
            legend: "none",
            width: 200,
            height: 200,
            chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
            backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" },
    
            // add this line
            pieSliceBorderColor : "#5A5A5A"
        });
    

    【讨论】:

    • 为我工作!谢谢!
    • 有没有什么办法让每个切片的笔触颜色不同?
    猜你喜欢
    • 2016-05-19
    • 2013-01-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-08-09
    相关资源
    最近更新 更多