溫馨提示×

Plotly怎么從HTML文件中加載圖表

小億
221
2024-05-17 11:35:15
欄目: 編程語言

要從HTML文件中加載Plotly圖表,您可以使用Plotly.js庫中的Plotly.newPlot方法來實現。下面是一個簡單的例子:

  1. 首先,確保您已經在您的HTML文件中引入了Plotly.js庫。您可以通過在<head>標簽中添加以下代碼來引入Plotly.js庫:
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  1. 接下來,您可以通過在<body>標簽中添加一個<div>元素來創建一個容器,用于顯示Plotly圖表。例如:
<div id="myChart"></div>
  1. 然后,您可以在JavaScript代碼中使用Plotly.newPlot方法來加載并顯示圖表。例如:
var data = [
  {
    x: [1, 2, 3, 4, 5],
    y: [10, 20, 15, 25, 30],
    type: 'scatter'
  }
];

var layout = {
  title: 'My Plotly Chart'
};

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

在上面的代碼中,我們定義了一個包含一組數據和布局信息的對象,并將其傳遞給Plotly.newPlot方法。最后一個參數'myChart'指定了要在哪個<div>元素中顯示圖表。

  1. 最后,您可以將上述JavaScript代碼保存在一個單獨的.js文件中,并在HTML文件中使用<script>標簽將其引入。例如:
<script src="myChart.js"></script>

這樣就可以從HTML文件中加載Plotly圖表了。您可以根據自己的需求來定義數據和布局信息,以創建不同類型的圖表。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女