使用 JSON Plotly.js 中的多个系列问题

Question

作为一个新手，我几乎拔掉了所有的头发 - 我需要帮助！我已经能够将单个阵列的 JSON 数据传送和加载到 plotly.js。说到多个系列，那就是另一回事了。我已经尝试了我能想象到的所有组合，但无法将两个数组加载到 plotly 中。

PHP 代码结尾：

$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 结果：

[[{
"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"
}]]

到目前为止一切正常。

现在是困难的部分 - 将 JSON 响应与 plotly 配对以生成堆叠条形图的正确 format/syntax 是什么？我已经搜索和搜索、黑客攻击和修补都无济于事。我最后一次 HTML/JS 的尝试如下：

 <script type="text/javascript">
        var layout6 = {
            margin: {
                l: 80,
                r: 80,
                t: 0,
                b: 80
            },
            font: {
                family: 'Raleway',
                size: 14,
                color: '#444444'
            },
            xaxis: {
                tickangle: -45,
                tickfont: {
                    size: 14,
                    color: '#444444'
                }
            },
            yaxis: {
                title: 'amount'
            }
            };
        $.get('./php/chttest.php', null, function(data) {
            Plotly.newPlot('chttest', [[trace1 = {
                x: data[0].x, y: data[0].y
            }],
            [trace2 = {
                x: data[0].x, y: data[0].y
                }]],
             layout6,{displaylogo: false});
        }, "json");
    </script>  
    <h1>Investments - total</h1>
    <div id="chttest" style="width:670px;height:525px;"></div>
        <br><br><br><br>
    </section>
  </div>
 </body>
 </html>

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 中的多个系列问题

Issue with multiple series in Plotly.js using JSON

trace

json

load

series

plotly