更改面积图的填充和描边颜色？答案

【问题标题】：Change the Fill and Stroke color of an area chart?更改面积图的填充和描边颜色？
【发布时间】：2014-08-11 11:34:49
【问题描述】：

我对谷歌图表比较陌生，所以请原谅我的无知；

我正在查看面积图，我想更改填充和描边颜色。这是代码...

<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>
            Google Visualization API Sample
        </title>
        <script type="text/javascript" src="//www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load('visualization', '1', {packages: ['corechart']});
        </script>
        <script type="text/javascript">

            function drawVisualization() {
                // Some raw data (not necessarily accurate)
                var data = google.visualization.arrayToDataTable([
                    ['Month',   'Target'],
                    ['JAN',    85],
                    ['FEB',    105],
                    ['MAR',    65],
                    ['APR',    45],
                    ['MAY',    45],
                    ['JUN',    15],
                    ['JUL',    60]
                ]);

                // Create and draw the visualization.
                var ac = new google.visualization.AreaChart(document.getElementById('visualization'));
                ac.draw(data, {
                    title : '',
                    isStacked: true,
                    width: 600,
                    height: 400,
                    vAxis: {title: "Millions"},
                    hAxis: {title: "Month"}
                });
            }

            google.setOnLoadCallback(drawVisualization);
        </script>
    </head>
    <body style="font-family: Arial;border: 0 none;">
        <div id="visualization" style="width: 600px; height: 400px;"></div>
    </body>
</html>

我的问题的另一部分是，我在哪里可以找到自定义谷歌图表的完整参考？

谢谢，

【问题讨论】：

标签： charts google-visualization visualization

【解决方案1】：

AreaChart 中每个系列的填充和描边颜色由系列颜色决定。您可以通过设置 colors 选项（采用 HTML 颜色字符串数组，按列顺序分配给数据系列）或通过 series.<series index>.color 选项（采用 HTML 颜色字符串：

colors: ['#f36daa', 'blue', '#3fc26b']

或：

series: {
    0: {
        // set options for the first data series
        color: '#f36daa'
    },
    1: {
        // set options for the second data series
        color: 'red'
    },
    2: {
        // set options for the third data series
        color: '#3fc26b'
    }
}

图表选项（大部分）记录在特定图表的文档中（例如：AreaChart）。一些跨越多个图表的功能分别记录（例如：Intervals、Trendlines、Dashboards and Controls、Event Handlers、Animations）。数据结构、数据操作、格式化和相关的类都记录在API Reference。

【讨论】：