Question

以下代码无法呈现数据。没有异常被抛出。但是，如果只给出第二个代码段中所示的两条跟踪中的一条，则相同的代码可以正常工作。唯一的区别是打电话

    Plotly.newPlot(target_target, traces); // doesn't render

而不是：

    Plotly.newPlot(target_target, trace0); // trace1 also works.

我是一个javascript noob，所以我的 trace 数组可能出错了，但它看起来像我看到的示例代码。

无法运作的代码（完成）：

<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id='target' style="width:600px;height:450px;"></div>
    <script>
        var target_target = document.getElementById('target');

        var trace0 =
            [{
                x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
                y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
                type: 'scatter'
         }];

        var trace1 =
            [{
                x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
                y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
                type: 'scatter'
         }];

    var traces = [ trace0, trace1 ];
    Plotly.newPlot(target_target, traces);

</script>
</body>
</html>

有效的代码（完整）：

<html>
<head>
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
    <div id='target' style="width:600px;height:450px;"></div>
    <script>
        var target_target = document.getElementById('target');

        var trace1 =
            [{
                x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
                y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
                type: 'scatter'
         }];

    Plotly.newPlot(target_target, trace1);

</script>
</body>
</html>

Answer 1

你犯的错误只是个别痕迹应该是objects而不是array of a single object，你需要做的就是进行这种修正。

<强>之前：

var trace0 =
            [{
                x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
                y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
                type: 'scatter'
         }];

<强>后：

var trace0 =
            {
                x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
                y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
                type: 'scatter'
         };

然后，需要将这些单独的迹线（对象）分组到一个数组中并以图形方式设置。

var traces = [ trace0, trace1 ];
Plotly.newPlot(target_target, traces);

这就是第二个例子有效的原因，因为跟踪是作为一个对象数组接收的。

请参考以下示例，检查问题是否已解决！

var target_target = document.getElementById('target');

var trace0 = {
  x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
  y: [0.5, 1.5, 6.5, 14.5, 25.5, 39.5],
  type: 'scatter'
};

var trace1 = {
  x: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0],
  y: [0.0, 1.0, 6.0, 14.0, 25.0, 39.0],
  type: 'scatter'
};

var traces = [trace0, trace1];
Plotly.newPlot(target_target, traces);

<html>

<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>

<body>
  <div id='target' style="width:600px;height:450px;"></div>
</body>

</html>

传递一系列跟踪时，Plot.ly不会呈现

1 个答案: