Question

几乎把我所有的头发拉成新手 - 我需要帮助！我已经能够为一个数组传递和加载JSON数据到plotly.js。谈到多个系列，它是另一个故事。我已经尝试了我能想象到的每一个组合，但却无法将两个阵列加载到剧情中。

PHP代码以：

结尾

vec_fac

这提供了以下JSON结果：

$result = $mysqli->query($query) or die($mysqli->error);
//loop through the returned data

$x = array();
$y = array();
$m = array();
$n = array();

while($query_result = $result->fetch_assoc()) {
$x[] = $query_result['date'];
$y[] = $query_result['non_retirement'];
$m[] = $query_result['retirement'];
$n[] = $query_result['total'];
}

$trace1 = [ [
"x" => $x,
"y" => $y,
"type" => "bar",
"name" => "trace1"
 ] ]; 

$trace2 = [ [
"x" => $x,
"y" => $m,
"type" => "bar",
"name" => "trace2"
] ]; 

$data = [$trace1, $trace2];

//free memory associated with result
$result->close();

//close connection
$mysqli->close();

//now print the data
print json_encode($data);

到目前为止，一切都在发挥作用。

现在对于困难的部分 - 将JSON响应与plotly配对以生成堆积条形图的正确格式/语法是什么？我搜索和搜索，黑客攻击并修补无效。我对HTML / JS的最后一次尝试如下：

[[{
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"],
"y": ["3327.44", "3256.09", "3307.31", "3167.08", "3121.70", "3094.00", "2994.47", "3030.34", "3013.37", "3024.04", "2947.38", "2894.87", "2906.35", "3100.24", "2927.34", "2935.27", "3068.91", "3160.94", "3142.50", "2974.55", "2983.94", "3116.90", "3126.30", "3075.40", "3101.00", "3107.80", "3022.40", "3120.06", "3053.10", "3020.80", "3007.00", "3019.16", "2995.00", "2961.00"],
"type": "bar",
"name": "trace1"
}], [{
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"],
"y": ["1899.84", "1873.44", "1903.07", "1831.94", "1806.00", "1767.83", "1622.87", "1685.99", "1682.28", "1670.96", "1596.70", "1593.97", "1565.10", "1545.14", "1444.32", "1444.77", "1548.85", "1599.87", "1579.56", "1476.74", "1538.82", "1624.90", "1647.60", "1647.00", "1682.20", "1683.00", "1651.40", "1674.92", "1632.90", "1615.10", "1621.00", "1645.25", "1629.00", "1614.00"],
"type": "bar",
"name": "trace2"
}]]

Answer 1

您的JSON看起来像一个双嵌套数组，如果删除它应该有效的跟踪方括号，或者您可以将数据传递给Plotly，如下例所示（[data[0][0], data[1][0]]）。

var data = [[{
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"],
"y": ["3327.44", "3256.09", "3307.31", "3167.08", "3121.70", "3094.00", "2994.47", "3030.34", "3013.37", "3024.04", "2947.38", "2894.87", "2906.35", "3100.24", "2927.34", "2935.27", "3068.91", "3160.94", "3142.50", "2974.55", "2983.94", "3116.90", "3126.30", "3075.40", "3101.00", "3107.80", "3022.40", "3120.06", "3053.10", "3020.80", "3007.00", "3019.16", "2995.00", "2961.00"],
"type": "bar",
"name": "trace1"
}], [{
"x": ["2017-05-01", "2017-04-01", "2017-03-01", "2017-02-01", "2017-01-01", "2016-12-01", "2016-11-01", "2016-10-01", "2016-09-01", "2016-08-01", "2016-07-01", "2016-06-01", "2016-05-01", "2016-04-01", "2016-03-01", "2016-02-01", "2016-01-01", "2015-12-01", "2015-11-01", "2015-10-01", "2015-09-01", "2015-08-14", "2015-08-01", "2015-07-01", "2015-06-01", "2015-05-01", "2015-04-01", "2015-03-01", "2015-02-01", "2015-01-01", "2014-12-18", "2014-12-01", "2014-11-13", "2014-11-01"],
"y": ["1899.84", "1873.44", "1903.07", "1831.94", "1806.00", "1767.83", "1622.87", "1685.99", "1682.28", "1670.96", "1596.70", "1593.97", "1565.10", "1545.14", "1444.32", "1444.77", "1548.85", "1599.87", "1579.56", "1476.74", "1538.82", "1624.90", "1647.60", "1647.00", "1682.20", "1683.00", "1651.40", "1674.92", "1632.90", "1615.10", "1621.00", "1645.25", "1629.00", "1614.00"],
"type": "bar",
"name": "trace2"
}]];
Plotly.plot('myPlot', [data[0][0], data[1][0]]);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myPlot'></div>

使用JSON在Plotly.js中出现多个系列问题

1 个答案: