HTML5 响应式谷歌图表控件开发实例

Responsive Google Charts。本例需要能访问Google jsapi相关资源（使用代理）

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 14086
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

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

function drawChart1() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004', 1000, 400],
        ['2005', 1170, 460],
        ['2006', 660, 1120],
        ['2007', 1030, 540]
    ]);

var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'red'
            }
        }
    };

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

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

function drawChart2() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2013', 1000, 400],
        ['2014', 1170, 460],
        ['2015', 660, 1120],
        ['2016', 1030, 540]
    ]);

var options = {
        title: 'Company Performance',
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: '#333'
            }
        },
        vAxis: {
            minValue: 0
        }
    };

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

$(window).resize(function() {
    drawChart1();
    drawChart2();
});

// Reminder: you need to put https://www.google.com/jsapi in the head of your document or as an external resource on codepen //

编译

CSS

HTML

Responsive Google Charts。本例需要能访问Google jsapi相关资源（使用代理）

编辑器支持Emmet

快捷键

Responsive Google Charts。 本例需要能访问Google jsapi相关资源（使用代理）

HTML5 + GSAP + Founation.css构建响应式博客文章列表页面布局模板

HTML5一款很不错的响应式导航栏界面组件（Night Tabs）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Responsive Google Charts。本例需要能访问Google jsapi相关资源（使用代理）