亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

嘗試在 2 個單獨的繪圖上創建 2 個餅圖.js它不會反映在指數上.html

嘗試在 2 個單獨的繪圖上創建 2 個餅圖.js它不會反映在指數上.html

qq_遁去的一_1 2022-08-27 09:21:45
將創建兩個餅圖,但第一個餅圖不會根據下拉列表顯示數據。它始終保持不變,并且數據不會更新。但是,第二個工作正常。這是我的代碼://first pie chartfunction init() {  var data = [{    values: [0, 0, 5, 9],    labels: ["Bass", "Chilean", "Fish", "Seafood"],    type: "pie"  }];  var layout = {    height: 600,    width: 800  };  Plotly.plot("pie", data, layout);}function updatePlotly(newdata) {  var PIE = document.getElementById("pie");  Plotly.restyle(PIE, "values", [newdata]);}function getData(dataset) {  var data = [];  switch (dataset) {    case "dataset1":      data = [0, 0, 5, 9];      break;    case "dataset2":      data = [0, 0, 5, 8];      break;    case "dataset3":      data = [0, 0, 2, 1];      break;    default:      data = [0, 0, 0, 0];  }  updatePlotly(data);}init();//second pie chartfunction init2() {  var data2 = [{    values: [1, 0, 42, 7],    labels: ["Bass", "Chilean", "Fish", "Seafood"],    type: "pie"  }];  var layout2 = {    height: 600,    width: 800  };  Plotly.plot("pie2", data2, layout2);}function updatePlotly(newdata2) {  var PIE2 = document.getElementById("pie2");  Plotly.restyle(PIE2, "values", [newdata2]);}function getData2(dataset2) {  var data2 = [];  switch (dataset2) {    case "dataset4":      data2 = [1, 0, 42, 7];      break;    case "dataset5":      data2 = [0, 0, 1, 4];      break;    case "dataset6":      data2 = [3, 7, 187, 37];      break;    default:      data2 = [0, 0, 0, 0];  }  updatePlotly(data2);}兩者都顯示出來。我嘗試刪除第二個圖表,第一個圖表有效??赡艹隽耸裁磫栴}?我為每個餅圖指定了不同的變量名稱。圖表不起作用的圖像:
查看完整描述

1 回答

?
慕的地10843

TA貢獻1785條經驗 獲得超8個贊

你搞砸了函數名稱,你已經定義了兩次。你應該簡化代碼:updatePlotly

  • 將所需的數據存儲在變量 () 中。pie_values

  • 不要定義 、 、 和 - 這些都是令人困惑的。相反,使用參數。init()init2()updatePlotly()updatePlotly2()

  • 您應該更改某些函數和id的名稱,以使代碼可讀 - 即使用與/等內容相關的id。<option><select>

以下是我的建議(我已經從HTML中刪除了一些以使其更簡單 - 忽略這些):

const pie_values = {

  pie1: [{

    values: [0, 0, 5, 9],

    labels: ["Bass", "Chilean", "Fish", "Seafood"],

    type: "pie"

  }],

  pie2: [{

    values: [1, 0, 42, 7],

    labels: ["Bass", "Chilean", "Fish", "Seafood"],

    type: "pie"

  }],

};


function init(data, id) {

  var data = data;

  var layout = {

    height: 600,

    width: 800

  };


  Plotly.plot(id, data, layout);

}


function updatePlotly(newdata, id) {

  var PIE = document.getElementById(id);

  Plotly.restyle(PIE, "values", [newdata]);

}


function getData(dataset) {

  var data = [];

  switch (dataset) {

    case "dataset1":

      data = [0, 0, 5, 9];

      break;

    case "dataset2":

      data = [0, 0, 5, 8];

      break;

    case "dataset3":

      data = [0, 0, 2, 1];

      break;

    default:

      data = [0, 0, 0, 0];

  }

  updatePlotly(data, "pie");

}


function getData2(dataset2) {

  var data = [];

  switch (dataset2) {

    case "dataset4":

      data = [1, 0, 42, 7];

      break;

    case "dataset5":

      data = [0, 0, 1, 4];

      break;

    case "dataset6":

      data = [3, 7, 187, 37];

      break;

    default:

      data = [0, 0, 0, 0];

  }

  updatePlotly(data, "pie2");

}


init(pie_values.pie1, "pie"); // pie chart 1 init()

init(pie_values.pie2, "pie2"); // pie chart 2 init()

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>


  <!-- first pie chart-->


  <select id="selDataset" onchange="getData(this.value)">

    <option value="dataset1">No.1 Joe's shanghai's @ 6158 reviews</option>

    <option value="dataset2">No.2 Eataly's @ 5499 reviews</option>

    <option value="dataset3">No.3 Ippudo's @ 3676 reviews</option>

  </select>

  <div id="pie"></div>


  <hr/>

  <!-- Second pie chart-->


  <select id="selDataset2" onchange="getData2(this.value)">

    <option value="dataset4">No.1 Fish cheek</option>

    <option value="dataset5">No.2 Au-zaatar-new-york</option>

    <option value="dataset6">No.3 Midtown catch</option>

  </select>


  <div id="pie2"></div>


查看完整回答
反對 回復 2022-08-27
  • 1 回答
  • 0 關注
  • 83 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號