javascript - 从对 Postgres 表的 JSON 调用中提取数据以用于 Highcharts(无需 PHP)

Question

我正在使用 JSON 从 Postgres 表中检索数据以用于 Highcharts 柱形图中。我在数据库中有五个时间序列，每个时间序列有五个元素，并且只想在图表中使用每个时间序列的两个键值对。

输出需要采用这种格式:

具有命名值的对象数组。在这种情况下，对象是点配置对象，如下所示。

范围系列值由低和高给出。

例子:

data: [{
          name: 'Point 1',
          color: '#00FF00',
          y: 0
      }, {
          name: 'Point 2',
          color: '#FF00FF',
          y: 5
      }]

请注意，线系列和派生类型(如样条曲线和面积)需要按 X 对数据进行排序，因为它会为工具提示插入鼠标坐标。列和散点系列，其中每个点都有自己的鼠标事件，不需要排序。

取自 Highcharts 系列/数据 api:http://api.highcharts.com/highcharts#series.data

这是我的数据库架构:

enable_extension "plpgsql"

create_table "series", force: true do |t|
  t.string   "acronym"
  t.string   "name"
  t.string   "current"
  t.string   "previous"
  t.string   "pc1"
  t.datetime "created_at"
  t.datetime "updated_at"
end
end

这是 json 调用:

url = "http://local server 3000/series";
$.getJSON(url, function (series) {
    console.log(series);
    }
    options.series[0].data = series;
    var chart = new Highcharts.Chart(options);

});

console.log 显示返回的对象数组:

[Object, Object, Object, Object, Object]
0: Object
acronym: "1"
current: "3.4"
id: 1
name: "a"
pc1: "25"
previous: "2.4"
url: "http://localhost:3000/series/1.json"
__proto__: Object
1: Object
2: Object
3: Object
4: Object
length: 5
__proto__: Array[0]

我“打开”了第一个对象以显示数据是如何返回的。请注意，键值对后没有逗号(Highcharts 要求)。

在当前图表中，一个柱形图，我只想显示系列“名称”，例如“a”，以及对应的键/值对“pc1”的值。 (它们实际上是经济时间序列，例如 CPI 及其同比百分比变化。)我计划创建其他图表，例如，针对特定时间序列的当前值和先前值。

我是编程新手，不知道如何将键:值对“提取”为 Highcharts 格式。

我尝试将数据插入一个新数组，但没有成功:

var data = [];
data.push(series[0].name + "," series[0].pc1); 

我尝试了一个 for 循环但没有成功:

for (var i = 0, l = series.length; i < l; i++) {
var key = series[i].name;
var value = series[i].pc1;
var data = [ [key + ":" + value], };

在大多数尝试中，我可以构建一个数组，但不是一个嵌套的对象和/或一个在 x 和 y 值之间有逗号的对象。

我也试过 splice();但是，只能删除整个对象。

那么，我如何获得如下所示的输出:

data: [{
name: 'a',
pc1: '25',
}, {
name: 'b',
pc1: '15',
}]

我在与 PHP 和 MySQL 相关的答案中看到一些非常复杂的代码；然而，只有 JSON 没有什么(我能找到)。

一个相关的问题:我是否正确地处理了这个问题。或者我应该为每个图表创建一个新的数据库表，以便只保存和检索我想要显示的数据。

提前谢谢你。

Answer 1

我绝对不会建议您为每个图表创建一个新的数据库表。那是没有必要的。您可以从该表定制您的 SQL 查询以满足您的图表数据需求。

一个问题是您的 y 值当前是一个字符串，这不是您在绘图应用程序中想要的。这应该在您的 SQL 查询中转换为整数。

数据形式是散列的数组。要初始化数组并添加一个这样的元素，您可以这样做:

data = [];
data.push({'name': 'a', 'pc1': 25});

要以 pretty-print 形式查看数据，您可以使用以下代码在控制台中验证它:

print(JSON.stringify(data));

因此，基本上您可以在 for 循环中构建 数组 哈希(或通过 jQuery 的 $.each).

不过，该方法本质上是手动滚动您自己的 JSON，这有点乏味并且在某些情况下容易出错。一种更简单的方法可能是让您的后端将 Postgres 查询的结果直接转换为 JSON。

Ruby(根据您的模式定义代码，我假设您在后端使用的是它)有一个 JSON 模块 ( http://www.ruby-doc.org/stdlib-2.0.0/libdoc/json/rdoc/JSON.html) 可以执行这个。

请注意，要使其正常工作，您的Postgres 库需要将数据作为散列 的数组 返回，因此它具有列名也是如此(只有 array 的 arrays 将不起作用)。这可以通过 psycopg2 (Python) 和 DBI (Perl) 等库来实现，并且可能同样可用在您正在使用的 Ruby 库中。