常见的图形库系列

常见的图形库概览-00-overview

常见的图形库概览-01-Chart.js 入门例子

常见的图形库概览-03-D3.js 入门例子

HighCharts 交互式图表-01-入门介绍

Plotly 函数图像绘制

ApexCharts 图表入门例子

Victory 图表基于 React，适合 React 项目，支持移动端

Recharts 入门例子

AntV G2 入门例子

图表库 C3.js 入门例子

图表库 Google Charts 入门例子

ECharts-01-图表库系列

入门例子

Google Charts 是一个功能强大的图表库，支持多种图表类型，并且易于使用。

Google Charts

例子

以下是一个简单的 Google Charts 入门示例，展示如何使用 Google Charts 创建一个基本的柱状图（Bar Chart）。

    
    
    Google Charts 入门示例
    
    
        // 加载 Google Charts 库
        google.charts.load('current', { packages: ['corechart'] });

        // 设置回调函数，当库加载完成后执行
        google.charts.setOnLoadCallback(drawChart);

        // 绘制图表的函数
        function drawChart() {
            // 创建数据表
            const data = google.visualization.arrayToDataTable([
                ['Month', 'Sales'], // 列标题
                ['Jan', 1000],      // 数据行
                ['Feb', 1170],
                ['Mar', 660],
                ['Apr', 1030],
                ['May', 800],
                ['Jun', 1200]
            ]);

            // 配置选项
            const options = {
                title: 'Monthly Sales', // 图表标题
                hAxis: { title: 'Month' }, // 水平轴标题
                vAxis: { title: 'Sales' }, // 垂直轴标题
                legend: 'none' // 不显示图例
            };

            // 创建图表实例并绑定到容器
            const chart = new google.visualization.ColumnChart(document.getElementById('chart'));

            // 绘制图表
            chart.draw(data, options);
        }