谷歌图表,区域图表没有正确呈现我错过了什么?

时间:2017-01-25 11:47:34

标签: javascript jquery charts google-visualization

我正在努力创建一个电力和天然气使用量的图表,在一年内分解成几个月。该图应该看起来像这个图像,但有两行:enter image description here

以下是我的图表的jsfiddle:http://jsfiddle.net/79ffvayr/304/

图表正在渲染,但沿底轴没有数据或数月。我认为它必须与我的数据有关,但我看不清楚。

这是我的我的javascript,但我没有包括完整的数据数组,因为它每天都是spand一整年。有关完整数据数组,请参阅上面的js小提琴

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([

         ['Time', 'Electricity', 'Gas'],
    [new Date('2017', ',01', ',01'), 61.7, 74.04],
    [new Date('2017', ',01', ',02'), 91.145, 109.374],
    [new Date('2017', ',01', ',03'), 28.378, 74.62],
    [new Date('2017', ',01', ',04'), 16.75, 33.5],
    [new Date('2017', ',01', ',05'), 26.136, 39.204],
    [new Date('2017', ',01', ',06'), 466.248, 41.975],
    [new Date('2017', ',01', ',07'), 0, 117.414],
    [new Date('2017', ',01', ',08'), 42.268, 0],
    [new Date('2017', ',01', ',09'), 10.442, 31.326],
    [new Date('2017', ',01', ',10'), 56.356, 0],
    [new Date('2017', ',01', ',11'), 21.15, 31.725],
    [new Date('2017', ',01', ',12'), 55.226, 82.839],
    [new Date('2017', ',01', ',13'), 488.352, 610.44],
    [new Date('2017', ',01', ',14'), 148.252, 85.035],
    [new Date('2017', ',01', ',15'), 141.925, 198.695],
    [new Date('2017', ',01', ',16'), 102.36, 120.372],
    [new Date('2017', ',01', ',17'), 25.86, 30.17],
    [new Date('2017', ',01', ',18'), 127.848, 149.156],
    ]);

        var options = {
        chartArea: {

        },
                                    hAxis: {
                                        title: 'By Month',
                                        viewWindowMode: 'pretty',
                                        slantedText: false,
                                        count: -1,
                                        format: 'MMMM',
                                        gridlines: {
                                            color: 'transparent'
                                        },
                                        textStyle: {
                                            color: 'black',
                                            fontSize: 12,
                                            fontName: 'Arial',
                                            bold: true,
                                            italic: false
                                        },
                                        titleTextStyle: {
                                            color: 'black',
                                            fontSize: 16,
                                            fontName: 'Arial',
                                            bold: true,
                                            italic: false
                                        }
                                    },
                                    vAxis: {
                                        title: 'kWh',
                                        titleTextStyle: {
                                            color: 'black',
                                            fontSize: 16,
                                            fontName: 'Arial',
                                            bold: true,
                                            italic: false
                                        },
                                        textStyle: {
                                            color: 'black',
                                            fontSize: 12,
                                            fontName: 'Arial',
                                            bold: true,
                                            italic: false
                                        },
                                    },

                                    legend: { position: 'top' },
                                    backgroundColor: '#fff',
                                    colors: ['#f36daa','#51b9d2'],
                                };

                                var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
                                chart.draw(data, options);
                            }

     <div id="chart_div" style="width: 900px; height: 500px;"></div>

1 个答案:

答案 0 :(得分:0)

日期中只有一些额外的逗号......

已更改 - &gt; new Date('2017', ',01', ',01')

到 - &gt; new Date(2017, 0, 1)

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Time', 'Electricity', 'Gas'],
    [new Date(2017, 0, 01), 61.7, 74.04],
    [new Date(2017, 0, 02), 91.145, 109.374],
    [new Date(2017, 0, 03), 28.378, 74.62],
    [new Date(2017, 0, 04), 16.75, 33.5],
    [new Date(2017, 0, 05), 26.136, 39.204],
    [new Date(2017, 0, 06), 466.248, 41.975],
    [new Date(2017, 0, 07), 0, 117.414],
    [new Date(2017, 0, 08), 42.268, 0],
    [new Date(2017, 0, 09), 10.442, 31.326],
    [new Date(2017, 0, 10), 56.356, 0],
    [new Date(2017, 0, 11), 21.15, 31.725],
    [new Date(2017, 0, 12), 55.226, 82.839],
    [new Date(2017, 0, 13), 488.352, 610.44],
    [new Date(2017, 0, 14), 148.252, 85.035],
    [new Date(2017, 0, 15), 141.925, 198.695],
    [new Date(2017, 0, 16), 102.36, 120.372],
    [new Date(2017, 0, 17), 25.86, 30.17],
    [new Date(2017, 0, 18), 127.848, 149.156],
    [new Date(2017, 0, 19), 0, 0],
    [new Date(2017, 0, 20), 0, 0],
    [new Date(2017, 0, 21), 0, 0],
    [new Date(2017, 0, 22), 0, 0],
    [new Date(2017, 0, 23), 0, 0],
    [new Date(2017, 0, 24), 0, 0],
    [new Date(2017, 0, 25), 0, 0],
    [new Date(2017, 0, 26), 0, 0],
    [new Date(2017, 0, 27), 0, 0],
    [new Date(2017, 0, 28), 0, 0],
    [new Date(2017, 0, 29), 0, 0],
    [new Date(2017, 0, 30), 0, 0],
    [new Date(2017, 0, 31), 0, 0],
    [new Date(2017, 1, 01), 0, 0],
    [new Date(2017, 1, 02), 0, 0],
    [new Date(2017, 1, 03), 0, 0],
    [new Date(2017, 1, 04), 0, 0],
    [new Date(2017, 1, 05), 0, 0],
    [new Date(2017, 1, 06), 0, 0],
    [new Date(2017, 1, 07), 0, 0],
    [new Date(2017, 1, 08), 0, 0],
    [new Date(2017, 1, 09), 0, 0],
    [new Date(2017, 1, 10), 0, 0],
    [new Date(2017, 1, 11), 0, 0],
    [new Date(2017, 1, 12), 0, 0],
    [new Date(2017, 1, 13), 0, 0],
    [new Date(2017, 1, 14), 0, 0],
    [new Date(2017, 1, 15), 0, 0],
    [new Date(2017, 1, 16), 0, 0],
    [new Date(2017, 1, 17), 0, 0],
    [new Date(2017, 1, 18), 0, 0],
    [new Date(2017, 1, 19), 0, 0],
    [new Date(2017, 1, 20), 0, 0],
    [new Date(2017, 1, 21), 0, 0],
    [new Date(2017, 1, 22), 0, 0],
    [new Date(2017, 1, 23), 0, 0],
    [new Date(2017, 1, 24), 0, 0],
    [new Date(2017, 1, 25), 0, 0],
    [new Date(2017, 1, 26), 0, 0],
    [new Date(2017, 1, 27), 0, 0],
    [new Date(2017, 1, 28), 0, 0],
    [new Date(2017, 2, 01), 0, 0],
    [new Date(2017, 2, 02), 0, 0],
    [new Date(2017, 2, 03), 0, 0],
    [new Date(2017, 2, 04), 0, 0],
    [new Date(2017, 2, 05), 0, 0],
    [new Date(2017, 2, 06), 0, 0],
    [new Date(2017, 2, 07), 0, 0],
    [new Date(2017, 2, 08), 0, 0],
    [new Date(2017, 2, 09), 0, 0],
    [new Date(2017, 2, 10), 0, 0],
    [new Date(2017, 2, 11), 0, 0],
    [new Date(2017, 2, 12), 0, 0],
    [new Date(2017, 2, 13), 0, 0],
    [new Date(2017, 2, 14), 0, 0],
    [new Date(2017, 2, 15), 0, 0],
    [new Date(2017, 2, 16), 0, 0],
    [new Date(2017, 2, 17), 0, 0],
    [new Date(2017, 2, 18), 0, 0],
    [new Date(2017, 2, 19), 0, 0],
    [new Date(2017, 2, 20), 0, 0],
    [new Date(2017, 2, 21), 0, 0],
    [new Date(2017, 2, 22), 0, 0],
    [new Date(2017, 2, 23), 0, 0],
    [new Date(2017, 2, 24), 0, 0],
    [new Date(2017, 2, 25), 0, 0],
    [new Date(2017, 2, 26), 0, 0],
    [new Date(2017, 2, 27), 0, 0],
    [new Date(2017, 2, 28), 0, 0],
    [new Date(2017, 2, 29), 0, 0],
    [new Date(2017, 2, 30), 0, 0],
    [new Date(2017, 2, 31), 0, 0],
    [new Date(2017, 3, 01), 0, 0],
    [new Date(2017, 3, 02), 0, 0],
    [new Date(2017, 3, 03), 0, 0],
    [new Date(2017, 3, 04), 0, 0],
    [new Date(2017, 3, 05), 0, 0],
    [new Date(2017, 3, 06), 0, 0],
    [new Date(2017, 3, 07), 0, 0],
    [new Date(2017, 3, 08), 0, 0],
    [new Date(2017, 3, 09), 0, 0],
    [new Date(2017, 3, 10), 0, 0],
    [new Date(2017, 3, 11), 0, 0],
    [new Date(2017, 3, 12), 0, 0],
    [new Date(2017, 3, 13), 0, 0],
    [new Date(2017, 3, 14), 0, 0],
    [new Date(2017, 3, 15), 0, 0],
    [new Date(2017, 3, 16), 0, 0],
    [new Date(2017, 3, 17), 0, 0],
    [new Date(2017, 3, 18), 0, 0],
    [new Date(2017, 3, 19), 0, 0],
    [new Date(2017, 3, 20), 0, 0],
    [new Date(2017, 3, 21), 0, 0],
    [new Date(2017, 3, 22), 0, 0],
    [new Date(2017, 3, 23), 0, 0],
    [new Date(2017, 3, 24), 0, 0],
    [new Date(2017, 3, 25), 0, 0],
    [new Date(2017, 3, 26), 0, 0],
    [new Date(2017, 3, 27), 0, 0],
    [new Date(2017, 3, 28), 0, 0],
    [new Date(2017, 3, 29), 0, 0],
    [new Date(2017, 3, 30), 0, 0],
    [new Date(2017, 4, 01), 0, 0],
    [new Date(2017, 4, 02), 0, 0],
    [new Date(2017, 4, 03), 0, 0],
    [new Date(2017, 4, 04), 0, 0],
    [new Date(2017, 4, 05), 0, 0],
    [new Date(2017, 4, 06), 0, 0],
    [new Date(2017, 4, 07), 0, 0],
    [new Date(2017, 4, 08), 0, 0],
    [new Date(2017, 4, 09), 0, 0],
    [new Date(2017, 4, 10), 0, 0],
    [new Date(2017, 4, 11), 0, 0],
    [new Date(2017, 4, 12), 0, 0],
    [new Date(2017, 4, 13), 0, 0],
    [new Date(2017, 4, 14), 0, 0],
    [new Date(2017, 4, 15), 0, 0],
    [new Date(2017, 4, 16), 0, 0],
    [new Date(2017, 4, 17), 0, 0],
    [new Date(2017, 4, 18), 0, 0],
    [new Date(2017, 4, 19), 0, 0],
    [new Date(2017, 4, 20), 0, 0],
    [new Date(2017, 4, 21), 0, 0],
    [new Date(2017, 4, 22), 0, 0],
    [new Date(2017, 4, 23), 0, 0],
    [new Date(2017, 4, 24), 0, 0],
    [new Date(2017, 4, 25), 0, 0],
    [new Date(2017, 4, 26), 0, 0],
    [new Date(2017, 4, 27), 0, 0],
    [new Date(2017, 4, 28), 0, 0],
    [new Date(2017, 4, 29), 0, 0],
    [new Date(2017, 4, 30), 0, 0],
    [new Date(2017, 4, 31), 0, 0],
    [new Date(2017, 5, 01), 0, 0],
    [new Date(2017, 5, 02), 0, 0],
    [new Date(2017, 5, 03), 0, 0],
    [new Date(2017, 5, 04), 0, 0],
    [new Date(2017, 5, 05), 0, 0],
    [new Date(2017, 5, 06), 0, 0],
    [new Date(2017, 5, 07), 0, 0],
    [new Date(2017, 5, 08), 0, 0],
    [new Date(2017, 5, 09), 0, 0],
    [new Date(2017, 5, 10), 0, 0],
    [new Date(2017, 5, 11), 0, 0],
    [new Date(2017, 5, 12), 0, 0],
    [new Date(2017, 5, 13), 0, 0],
    [new Date(2017, 5, 14), 0, 0],
    [new Date(2017, 5, 15), 0, 0],
    [new Date(2017, 5, 16), 0, 0],
    [new Date(2017, 5, 17), 0, 0],
    [new Date(2017, 5, 18), 0, 0],
    [new Date(2017, 5, 19), 0, 0],
    [new Date(2017, 5, 20), 0, 0],
    [new Date(2017, 5, 21), 0, 0],
    [new Date(2017, 5, 22), 0, 0],
    [new Date(2017, 5, 23), 0, 0],
    [new Date(2017, 5, 24), 0, 0],
    [new Date(2017, 5, 25), 0, 0],
    [new Date(2017, 5, 26), 0, 0],
    [new Date(2017, 5, 27), 0, 0],
    [new Date(2017, 5, 28), 0, 0],
    [new Date(2017, 5, 29), 0, 0],
    [new Date(2017, 5, 30), 0, 0],
    [new Date(2017, 6, 01), 0, 0],
    [new Date(2017, 6, 02), 0, 0],
    [new Date(2017, 6, 03), 0, 0],
    [new Date(2017, 6, 04), 0, 0],
    [new Date(2017, 6, 05), 0, 0],
    [new Date(2017, 6, 06), 0, 0],
    [new Date(2017, 6, 07), 0, 0],
    [new Date(2017, 6, 08), 0, 0],
    [new Date(2017, 6, 09), 0, 0],
    [new Date(2017, 6, 10), 0, 0],
    [new Date(2017, 6, 11), 0, 0],
    [new Date(2017, 6, 12), 0, 0],
    [new Date(2017, 6, 13), 0, 0],
    [new Date(2017, 6, 14), 0, 0],
    [new Date(2017, 6, 15), 0, 0],
    [new Date(2017, 6, 16), 0, 0],
    [new Date(2017, 6, 17), 0, 0],
    [new Date(2017, 6, 18), 0, 0],
    [new Date(2017, 6, 19), 0, 0],
    [new Date(2017, 6, 20), 0, 0],
    [new Date(2017, 6, 21), 0, 0],
    [new Date(2017, 6, 22), 0, 0],
    [new Date(2017, 6, 23), 0, 0],
    [new Date(2017, 6, 24), 0, 0],
    [new Date(2017, 6, 25), 0, 0],
    [new Date(2017, 6, 26), 0, 0],
    [new Date(2017, 6, 27), 0, 0],
    [new Date(2017, 6, 28), 0, 0],
    [new Date(2017, 6, 29), 0, 0],
    [new Date(2017, 6, 30), 0, 0],
    [new Date(2017, 6, 31), 0, 0],
    [new Date(2017, 7, 01), 0, 0],
    [new Date(2017, 7, 02), 0, 0],
    [new Date(2017, 7, 03), 0, 0],
    [new Date(2017, 7, 04), 0, 0],
    [new Date(2017, 7, 05), 0, 0],
    [new Date(2017, 7, 06), 0, 0],
    [new Date(2017, 7, 07), 0, 0],
    [new Date(2017, 7, 08), 0, 0],
    [new Date(2017, 7, 09), 0, 0],
    [new Date(2017, 7, 10), 0, 0],
    [new Date(2017, 7, 11), 0, 0],
    [new Date(2017, 7, 12), 0, 0],
    [new Date(2017, 7, 13), 0, 0],
    [new Date(2017, 7, 14), 0, 0],
    [new Date(2017, 7, 15), 0, 0],
    [new Date(2017, 7, 16), 0, 0],
    [new Date(2017, 7, 17), 0, 0],
    [new Date(2017, 7, 18), 0, 0],
    [new Date(2017, 7, 19), 0, 0],
    [new Date(2017, 7, 20), 0, 0],
    [new Date(2017, 7, 21), 0, 0],
    [new Date(2017, 7, 22), 0, 0],
    [new Date(2017, 7, 23), 0, 0],
    [new Date(2017, 7, 24), 0, 0],
    [new Date(2017, 7, 25), 0, 0],
    [new Date(2017, 7, 26), 0, 0],
    [new Date(2017, 7, 27), 0, 0],
    [new Date(2017, 7, 28), 0, 0],
    [new Date(2017, 7, 29), 0, 0],
    [new Date(2017, 7, 30), 0, 0],
    [new Date(2017, 7, 31), 0, 0],
    [new Date(2017, 8, 01), 0, 0],
    [new Date(2017, 8, 02), 0, 0],
    [new Date(2017, 8, 03), 0, 0],
    [new Date(2017, 8, 04), 0, 0],
    [new Date(2017, 8, 05), 0, 0],
    [new Date(2017, 8, 06), 0, 0],
    [new Date(2017, 8, 07), 0, 0],
    [new Date(2017, 8, 08), 0, 0],
    [new Date(2017, 8, 09), 0, 0],
    [new Date(2017, 8, 10), 0, 0],
    [new Date(2017, 8, 11), 0, 0],
    [new Date(2017, 8, 12), 0, 0],
    [new Date(2017, 8, 13), 0, 0],
    [new Date(2017, 8, 14), 0, 0],
    [new Date(2017, 8, 15), 0, 0],
    [new Date(2017, 8, 16), 0, 0],
    [new Date(2017, 8, 17), 0, 0],
    [new Date(2017, 8, 18), 0, 0],
    [new Date(2017, 8, 19), 0, 0],
    [new Date(2017, 8, 20), 0, 0],
    [new Date(2017, 8, 21), 0, 0],
    [new Date(2017, 8, 22), 0, 0],
    [new Date(2017, 8, 23), 0, 0],
    [new Date(2017, 8, 24), 0, 0],
    [new Date(2017, 8, 25), 0, 0],
    [new Date(2017, 8, 26), 0, 0],
    [new Date(2017, 8, 27), 0, 0],
    [new Date(2017, 8, 28), 0, 0],
    [new Date(2017, 8, 29), 0, 0],
    [new Date(2017, 8, 30), 0, 0],
    [new Date(2017, 9, 01), 0, 0],
    [new Date(2017, 9, 02), 0, 0],
    [new Date(2017, 9, 03), 0, 0],
    [new Date(2017, 9, 04), 0, 0],
    [new Date(2017, 9, 05), 0, 0],
    [new Date(2017, 9, 06), 0, 0],
    [new Date(2017, 9, 07), 0, 0],
    [new Date(2017, 9, 08), 0, 0],
    [new Date(2017, 9, 09), 0, 0],
    [new Date(2017, 9, 10), 0, 0],
    [new Date(2017, 9, 11), 0, 0],
    [new Date(2017, 9, 12), 0, 0],
    [new Date(2017, 9, 13), 0, 0],
    [new Date(2017, 9, 14), 0, 0],
    [new Date(2017, 9, 15), 0, 0],
    [new Date(2017, 9, 16), 0, 0],
    [new Date(2017, 9, 17), 0, 0],
    [new Date(2017, 9, 18), 0, 0],
    [new Date(2017, 9, 19), 0, 0],
    [new Date(2017, 9, 20), 0, 0],
    [new Date(2017, 9, 21), 0, 0],
    [new Date(2017, 9, 22), 0, 0],
    [new Date(2017, 9, 23), 0, 0],
    [new Date(2017, 9, 24), 0, 0],
    [new Date(2017, 9, 25), 0, 0],
    [new Date(2017, 9, 26), 0, 0],
    [new Date(2017, 9, 27), 0, 0],
    [new Date(2017, 9, 28), 0, 0],
    [new Date(2017, 9, 29), 0, 0],
    [new Date(2017, 9, 30), 0, 0],
    [new Date(2017, 9, 31), 0, 0],
    [new Date(2017, 10, 01), 0, 0],
    [new Date(2017, 10, 02), 0, 0],
    [new Date(2017, 10, 03), 0, 0],
    [new Date(2017, 10, 04), 0, 0],
    [new Date(2017, 10, 05), 0, 0],
    [new Date(2017, 10, 06), 0, 0],
    [new Date(2017, 10, 07), 0, 0],
    [new Date(2017, 10, 08), 0, 0],
    [new Date(2017, 10, 09), 0, 0],
    [new Date(2017, 10, 10), 0, 0],
    [new Date(2017, 10, 11), 0, 0],
    [new Date(2017, 10, 12), 0, 0],
    [new Date(2017, 10, 13), 0, 0],
    [new Date(2017, 10, 14), 0, 0],
    [new Date(2017, 10, 15), 0, 0],
    [new Date(2017, 10, 16), 0, 0],
    [new Date(2017, 10, 17), 0, 0],
    [new Date(2017, 10, 18), 0, 0],
    [new Date(2017, 10, 19), 0, 0],
    [new Date(2017, 10, 20), 0, 0],
    [new Date(2017, 10, 21), 0, 0],
    [new Date(2017, 10, 22), 0, 0],
    [new Date(2017, 10, 23), 0, 0],
    [new Date(2017, 10, 24), 0, 0],
    [new Date(2017, 10, 25), 0, 0],
    [new Date(2017, 10, 26), 0, 0],
    [new Date(2017, 10, 27), 0, 0],
    [new Date(2017, 10, 28), 0, 0],
    [new Date(2017, 10, 29), 0, 0],
    [new Date(2017, 10, 30), 0, 0],
    [new Date(2017, 11, 01), 0, 0],
    [new Date(2017, 11, 02), 0, 0],
    [new Date(2017, 11, 03), 0, 0],
    [new Date(2017, 11, 04), 0, 0],
    [new Date(2017, 11, 05), 0, 0],
    [new Date(2017, 11, 06), 0, 0],
    [new Date(2017, 11, 07), 0, 0],
    [new Date(2017, 11, 08), 0, 0],
    [new Date(2017, 11, 09), 0, 0],
    [new Date(2017, 11, 10), 0, 0],
    [new Date(2017, 11, 11), 0, 0],
    [new Date(2017, 11, 12), 0, 0],
    [new Date(2017, 11, 13), 0, 0],
    [new Date(2017, 11, 14), 0, 0],
    [new Date(2017, 11, 15), 0, 0],
    [new Date(2017, 11, 16), 0, 0],
    [new Date(2017, 11, 17), 0, 0],
    [new Date(2017, 11, 18), 0, 0],
    [new Date(2017, 11, 19), 0, 0],
    [new Date(2017, 11, 20), 0, 0],
    [new Date(2017, 11, 21), 0, 0],
    [new Date(2017, 11, 22), 0, 0],
    [new Date(2017, 11, 23), 0, 0],
    [new Date(2017, 11, 24), 0, 0],
    [new Date(2017, 11, 25), 0, 0],
    [new Date(2017, 11, 26), 0, 0],
    [new Date(2017, 11, 27), 0, 0],
    [new Date(2017, 11, 28), 0, 0],
    [new Date(2017, 11, 29), 0, 0],
    [new Date(2017, 11, 30), 0, 0],
    [new Date(2017, 11, 31), 0, 0],
  ]);

  var ticks = [
    new Date(2017, 0, 15),
    new Date(2017, 1, 15),
    new Date(2017, 2, 15),
    new Date(2017, 3, 15),
    new Date(2017, 4, 15),
    new Date(2017, 5, 15),
    new Date(2017, 6, 15),
    new Date(2017, 7, 15),
    new Date(2017, 8, 15),
    new Date(2017, 9, 15),
    new Date(2017, 10, 15),
    new Date(2017, 11, 15)
  ];

  var options = {
    chartArea: {

    },
    hAxis: {
      title: 'By Month',
      viewWindowMode: 'pretty',
      slantedText: false,
      count: -1,
      format: 'MMM',
      gridlines: {
        color: 'transparent'
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      viewWindow: {
        //max: new Date(2017, 11, 31)
      },
      ticks: ticks
    },
    vAxis: {
      title: 'kWh',
      titleTextStyle: {
        color: 'black',
        fontSize: 16,
        fontName: 'Arial',
        bold: true,
        italic: false
      },
      textStyle: {
        color: 'black',
        fontSize: 12,
        fontName: 'Arial',
        bold: true,
        italic: false
      }
    },
    legend: { position: 'top' },
    backgroundColor: '#fff',
    colors: ['#f36daa','#51b9d2'],
    curveType: 'function'
  };

  var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意

建议不使用 jsapi加载库,根据release notes ...

  

通过jsapi加载程序保留的Google图表版本不再一致更新。从现在开始,请使用新的gstatic加载程序(loader.js)。

<script src="https://www.gstatic.com/charts/loader.js"></script>

这也会将load语句更改为...

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});