堆栈内存溢出
  繁体   English   中英

Google图表，面积图无法正确呈现我缺少什么？

[英]Google charts, area chart not rendering properly what am I missing?

 原文  2017-01-25 11:47:33  1   1    javascript/ jquery/ charts/ google-visualization

问题描述

我试图创建一个图表，将一年中的电力和天然气使用量细分为几个月。 该图应类似于此图像，但有两行： 在此处输入图片说明

这是我的图表的jsfiddle： http : //jsfiddle.net/79ffvayr/304/

该图形正在渲染，但沿底轴的或几个月内没有数据。 我认为这一定与我的数据有关，但我看不到。

这是我的JavaScript，但是我没有包含完整的数据数组，因为它跨越了整整一年的每一天。 有关完整的数据数组，请参见上面的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 个解决方案

解决方案1
 0 已采纳  2017-01-25 12:18:08

只是在日期中加上了一些逗号...

更改-> new Date('2017', ',01', ',01')

到-> 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来加载库...

可以通过jsapi加载程序保留的Google图表版本不再保持一致更新。 从现在开始，请使用新的gstatic加载器（ loader.js ）。

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

这还将把load语句更改为... 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Google图表-区域图未正确划分网格线 Google Charts图表区域超出范围 Google图表上下区域图表 Google Visualizate时间线图表的日期奇怪地是一个月……我想念什么？ 谷歌图表呈现空图表 addRows() 错误 我的图表出了什么问题？ 我正在使用Google Chart API 为什么我的图表不起作用？ 我错过了什么 更改组合图中填充区域的不透明度（谷歌图表） 在面积图，谷歌图表上绘制具有不同颜色的垂直线 使用Google Charts API更改面积图中线的颜色
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM