无法在 javascript 中显示多个折线图

Question

我是 java-script 的新手，正在尝试学习如何将多个折线图添加到我的网站 UI。但不幸的是，我遇到了一个问题，我无法将多个折线图添加到我的网站 UI。我无法理解我做错了什么。我尝试了几种方法，但找不到解决方案。

感谢您的帮助！

下面是我的代码供大家参考。

var xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
    var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

    function displayPanel(i) {
      var panel = document.getElementById('panel');
      panel.innerHTML += `
    <div class="row">
        <div class="column">
             <form>
                <label id="paramname_${i}" for="paramvalue">${i}</label>
                <input type="text" id="paramvalue_${i}" name="param" value=${i} readonly>  
              </form>
         </div>
         <div id="chart_${i}" class="column">
             <canvas id="myChart${i}" style="width:100%;max-width:600px"></canvas>
         </div>
    </div>`;

      new Chart("myChart" + i, {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(0,0,255,1.0)",
            borderColor: "rgba(0,0,255,0.1)",
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                min: 6,
                max: 16
              }
            }],
          }
        }
      });
      new Chart("myChart" + i, {
        type: "line",
        data: {
          labels: xValues,
          datasets: [{
            fill: false,
            lineTension: 0,
            backgroundColor: "rgba(0,0,255,1.0)",
            borderColor: "rgba(0,0,255,0.1)",
            data: yValues
          }]
        },
        options: {
          legend: {
            display: false
          },
          scales: {
            yAxes: [{
              ticks: {
                min: 6,
                max: 16
              }
            }],
          }
        }
      });
    }

    for (i = 0; i < 2; i++) {
      displayPanel(i);
    }

<style>.column {
      float: left;
      align-self: right;
      width: 50%;
      padding: 10px;
    }

    .row {
      content: "";
      clear: both;
      display: table;
    }

    </style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
    <!DOCTYPE html>
    <html>

    <body>
      <div id="panel"></


----------


div>
    </body>

  function addParamsToPanel(parameter, paramValue, isDisplay, i) {
    console.log("XXXX" + parameter);
    if (isDisplay) {
      displayPanel(parameter, paramValue,i);
    }
  }

  function updatePanel(paramList, valueList) {
    param = paramList.toString().split(',');
    paramValue = valueList.toString().split(',');
    for (var i = 0; i < param.length; i++) {
      var p = document.createElement("div");
      var checkBox = document.createElement("input");
      var label = document.createElement("label");
      checkBox.type = "checkbox";
      checkBox.id = param[i];
      p.appendChild(checkBox);
      p.appendChild(label);
      document.getElementById("cboxes").appendChild(p);
      label.appendChild(document.createTextNode(param[i]));
      document.getElementById(param[i]).checked = true;
      addParamsToPanel(param[i], paramValue[i], document.getElementById(param[i]).checked, i);
    }
  }

  function displayPanel(parameter, paramValue, i) {
    var panel = document.getElementById('panel');    
    var today = new Date();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var newChart = 'paramChart_' + parameter;
    panel.innerHTML += `
    <div class="row">
        <!--div class="col-md-9 col-lg-10 col-sm-11"-->
        <div class="column">
          <form>
            <label id="paramname_${parameter}" for="paramvalue">${parameter}</label>
            <input type="text" id="paramvalue_${parameter}" name="param" value=${paramValue} readonly>  
            </form>
        </div>
        <div id="chart_${i}" class="column">
          <canvas id=${newChart} style="width:100%;max-height:100px;max-width:700px;border: solid;rgb(4, 31, 65);"></canvas>
        </div>
    `;

    console.log(newChart.value);
    var chart = new Chart(newChart, {
      type: "line",
      data: {
        labels: xValues,
        datasets: [{
          //label: 'set of ' + parameter,
          fill: false,
          //lineTension: 0,
          backgroundColor: "rgba(0,0,255,1.0)",
          borderColor: "rgba(0,0,255,0.1)",
          data: yValues,
          showLine: true,
          spanGaps: true
        }]
      },
      options: {
        legend: { display: false }
      }
    });
    chartMap.set(newChart, chart);
    chart.data.datasets[0].data.push(i.value);
    chart.data.labels.push(time);
    chart.update();
  }

  updatePanel(paramList, valueList);

Answer 1

似乎当您向内部 html 添加一个新部分时，它与 chart.js 有一些奇怪的行为，如果您首先使用表单和画布制作所有 div，然后创建图表工作正常：

var xValues = [50, 60, 70, 80, 90, 100, 110, 120, 130, 140, 150];
var yValues = [7, 8, 8, 9, 9, 9, 10, 11, 14, 14, 15];

function displayPanel(i) {
  var panel = document.getElementById('panel');
  panel.innerHTML += `
    <div class="row">
        <div class="column">
             <form>
                <label id="paramname_${i}" for="paramvalue">${i}</label>
                <input type="text" id="paramvalue_${i}" name="param" value=${i} readonly>  
              </form>
         </div>
         <div id="chart_${i}" class="column">
             <canvas id="myChart${i}" style="width:100%;max-width:600px"></canvas>
         </div>`;
}

function createChart(i) {
  new Chart("myChart" + i, {
    type: "line",
    data: {
      labels: xValues,
      datasets: [{
        fill: false,
        lineTension: 0,
        backgroundColor: "rgba(0,0,255,1.0)",
        borderColor: "rgba(0,0,255,0.1)",
        data: yValues
      }]
    },
    options: {
      legend: {
        display: false
      },
      scales: {
        yAxes: [{
          ticks: {
            min: 6,
            max: 16
          }
        }],
      }
    }
  });
}

function createUI(k) {
  for (i = 0; i < k; i++) {
    displayPanel(i);
  }

  for (i = 0; i < k; i++) {
    createChart(i);
  }
}

createUI(3)

<style>.column {
  float: left;
  align-self: right;
  width: 50%;
  padding: 10px;
}

.row {
  content: "";
  clear: both;
  display: table;
}

</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<!DOCTYPE html>
<html>

<body>
  <div id="panel"></div>
</body>

无法在 javascript 中显示多个折线图

Unable to display multiple line charts in javascript

html

javascript

css

chart.js