代码之家 › 专栏 › 技术社区 › L. Blanc

plot.ly在传递跟踪数组时不呈现

plotly javascript

L. Blanc · 技术社区 · 6 年前

下面的代码无法呈现数据。不会引发异常。但是,如果只给定第二个代码段中所示的两个跟踪之一,则相同的代码也可以工作。唯一的区别是打电话

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

而不是:

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

我是个javascript新手,所以可能是我的踪迹数组,但它看起来像我看到的示例代码。

无法工作的代码(完整):

<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>

1 回复 | 直到 6 年前

Naren Murali 6 年前

你犯的错误很简单 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>