使用 JSON 绘制具有多条线的单个 Google 折线图

Posted 2023-02-24

【中文标题】使用 JSON 绘制具有多条线的单个 Google 折线图

【英文标题】：Drawing a Single Google Line Chart with multiple lines using JSON

【发布时间】：2012-10-20 23:29:17

【问题描述】：

我正在尝试根据从 mysql 数据库接收到的数据绘制折线图。从数据库中我有这些数据

我想绘制一个谷歌折线图，将 x 轴作为销售日期，将 y 轴作为产品名称。但我希望每个产品都有多行，就像这样。

我可以为单个产品绘制图表。但无法想象如何为同一张图表中的多个产品做到这一点。我正在使用 JSON 获取图表数据并使用 MySQL 数据库。任何帮助，教程将不胜感激。谢谢。

PS：我按照本教程制作了一个单折线图。 http://www.kometschuh.de/GoogleChartToolswithJSON.html

【参考方案1】：

根据示例和文档here，您需要像这样创建图表的数据部分：

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

['Year', 'Sales', 'Expenses'] 是[x-axis, line 1, line 2, ... lineX]

那么后面的每个数组就是对应的数据。

在您链接的示例中，它将数据显示为 ['day', 'counts']，对应于上述格式。

您可以在 Data Format here 标题下看到此权利的表示

【讨论】：

蔡斯，谢谢你的回答。但是我怎么能像那样拆分我的 sql 数据。另一件事是，日期属性应根据产品进行更新。不同的产品有不同的销售日期......所以你有什么想法。

您目前如何构建数据？您实际上将获取每一行数据并将每个数组（行）推入另一个数组。这个数组数组将是谷歌图表的格式。日期是另一种野兽。您很可能需要将它们转换为 UTC 时间，然后在前端使用 javascript 将它们转换回日期字符串。

感谢您的回复。我知道我的问题也有点不清楚。反正我能应付。感谢您的回复。