试图在2个单独的plot.js上创建2个饼图，但它没有反映在index.html上

问题描述 投票：0回答：1

已创建两个饼图，但是根据下拉列表，第一个饼图未显示数据。它始终保持不变，并且数据不会更新。第二个作品，但是，很好。这是我的代码：

//first pie chart
function 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 chart
function 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);
}

init2();
<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>

<body>


  <div class="jumbotron text-center">
    <h1>Welcome </h1>
    <p>hypothesis: Seabass is a popular choice in non seafood setting restaurants among food reviewers</p>

  </div>

  <!-- first pie chart-->

  <h2>>Data collected among 300 Yelp reviews that words relating to seabass like seafood, fish, bass, chilean</h2>
  <h3>1) Search terms "Seabass" among 1000 restaurants in NYC sorted by most reviewed</h3>

  <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>
  <P>=============================================================================================================</P>

  <!-- Second pie chart-->

  <h3>2) Search terms "Seabass" among 1000 restaurants in NYC sorted by most recommended</h3>

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

  </div>
</body>

均显示。我尝试删除第二张图表，而第一张图表起作用。可能出了什么问题？我为每个饼图指示了不同的变量名称。

无效图表的图像：

pic of not working pie chart

javascript html charts plotly
1个回答
-2
投票

您弄乱了函数名，并且定义了两次updatePlotly。并且您应该简化代码：

  • 将所需数据存储在变量（pie_values）中。
  • 不要定义init()，init2()，updatePlotly()和updatePlotly2()-这些令人困惑。而是使用参数。
  • 您应该更改某些函数和ID的名称，以使代码可读-即，使用与<option> / <select>等内容相关的ID。>

    • 这是我的建议（为了简化起见，我已经从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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.