Question

我对谷歌排行榜比较新，所以请原谅我的无知;

我正在查看Area Chart，我想更改Fill和Stroke颜色。这是代码......

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

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

谢谢，

Answer 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中记录了数据结构，数据操作，格式化和相关类。

更改区域图表的填充和描边颜色？

1 个答案: