plotly.js 隐藏logo|极客笔记

plotly.js 隐藏logo

1. 介绍

Plotly.js 是一个开源的 JavaScript 图表库，可用于创建交互式数据可视化。它提供了丰富的图表类型和定制选项，让用户可以根据自己的需求来创建各种各样的图表。

在默认情况下，使用 Plotly.js 创建的图表会在右下角显示一个 Plotly 的 logo。对于一些正式的报告或者应用场景，用户可能希望隐藏这个 logo。

本文将介绍如何在使用 Plotly.js 创建图表时隐藏这个 logo。

2. 方法

隐藏 Plotly.js 的 logo 只需要在创建图表时添加一行代码即可。具体方法如下：

使用 Plotly.js 创建图表时，在 layout 对象中添加 showlogo: false 属性即可隐藏 logo。

var data = [{
  x: [1, 2, 3, 4, 5],
  y: [1, 2, 4, 8, 16],
  type: 'scatter'
}];

var layout = {
  showlogo: false
};

Plotly.newPlot('myDiv', data, layout);

在上面的代码中，我们创建了一个简单的折线图，并在 layout 对象中设置了 showlogo: false，这样就可以隐藏 Plotly 的 logo 了。

3. 示例

以下是一个完整的示例代码，演示如何使用 Plotly.js 创建一个带有隐藏 logo 的折线图：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="myDiv"></div>

  <script>
    var data = [{
      x: [1, 2, 3, 4, 5],
      y: [1, 2, 4, 8, 16],
      type: 'scatter'
    }];

    var layout = {
      showlogo: false
    };

    Plotly.newPlot('myDiv', data, layout);
  </script>
</body>
</html>

在上面的示例代码中，我们在 layout 对象中设置了 showlogo: false，创建了一个折线图，点击运行后可以看到隐藏了 Plotly 的 logo。