如何用Google Chart展示不同数据表中不同日期的数据

我明白你现在的困扰——当用关联查询统计两个表的数据时，日期不匹配导致部分日期的指标在Google Chart里显示不出来，对吧？结合你给出的示例数据，咱们来一步步解决这个问题：

核心问题是两个表的日期集合不完整，普通的内连接只会保留共同日期，所以我们需要先拿到所有出现过的日期，再分别关联两个表的对应数据，缺失的用默认值（比如0）填充，这样每个日期都能对应两个字段的数据，Google Chart就能正常展示了。

步骤1：编写SQL查询获取完整数据 #

首先，我们需要先收集两个表中所有的唯一日期，然后分别左连接table1和table2，用COALESCE函数把空值替换成你需要的默认值（比如0），确保每个日期都有sh_sh和ip的数据。

示例SQL代码：

-- 先获取所有唯一日期
WITH all_dates AS (
    SELECT date AS dt FROM table1
    UNION
    SELECT date AS dt FROM table2
)
-- 左连接两个表，补全缺失数据
SELECT 
    ad.dt AS date,
    COALESCE(t1.sh_sh, 0) AS sh_sh,
    COALESCE(t2.ip, 0) AS ip
FROM all_dates ad
LEFT JOIN table1 t1 ON ad.dt = t1.date
LEFT JOIN table2 t2 ON ad.dt = t2.date
ORDER BY ad.dt;

这段SQL会返回所有存在的日期（2018-04-24、25、26、27、28），对应的sh_sh或ip字段如果没有匹配数据，就会用0填充，保证每个日期都有完整的两行数据。

步骤2：适配Google Chart的数据格式 #

Google Chart（比如折线图、柱状图）需要二维数组格式的数据源，第一行是表头，后续是数据行。比如你可以把SQL返回的结果转换成这样的结构：

var data = google.visualization.arrayToDataTable([
    ['Date', 'sh_sh', 'ip'],
    ['2018-04-24', 0, 'data3'], // table1无此日期数据，sh_sh用0填充
    ['2018-04-25', 'data1', 'data2'],
    ['2018-04-26', 'data2', 0], // table2无此日期数据，ip用0填充
    ['2018-04-27', 'data3', 0],
    ['2018-04-28', 0, 'data1']
]);

注意：如果你的字段是数值类型，默认值就用数字；如果是字符串类型，就用对应格式的默认值，避免类型不匹配导致图表渲染失败。

额外小提示 #

• 如果需要展示连续的日期（比如中间缺失的日期也要显示），可以根据数据库类型生成连续日期序列（比如MySQL用递归查询、PostgreSQL用generate_series），这样即使两个表都没有的日期也能出现在结果里，图表会更完整。
• 如果你不想显示0，可以把空值留为null，然后设置Google Chart的ignoreNulls参数（部分图表类型支持），这样缺失的数据点会被自动跳过或用折线连贯起来。

内容的提问来源于stack exchange，提问作者Jazuly