Question

我使用相同的功能动态创建多个图表，但它始终只显示1个图表（最后一个）。我无法弄清楚代码中的错误/问题。

var charts = [];
function drawChart(canvasId, type, labels, inputData, title) {
 charts[canvasId] = new Chart(document.getElementById(canvasId), {
  type: type,
  data: {
    borderWidth: 5,
    labels: labels,
    datasets: [{
      backgroundColor: ["#008000", "#FF00FF", "#808000", "#00FF00", "#00FFFF", "#008080", "#0000FF", "#000080"],
      data: inputData
    }]
  },
  options: {
    cutoutPercentage: 70,
    title: {
      display: true,
      text: title,
      //   position:'left' //defaults to 'top'
    }
  }
});
return (charts[canvasId] !== null);
}

链接：jsfiddle

Answer 1

使用innerHTML正在创建问题

 elementDom.innerHTML += "<div style='width:400px;'><canvas id='" + canvasId + "'></canvas></div>";

而不是创建动态元素

  var canvasDiv = document.createElement('div');
  canvasDiv.setAttribute("style", "width:400px");
  var canvasElem = document.createElement('canvas');
  canvasElem.setAttribute("id", canvasId);
  canvasDiv.appendChild(canvasElem)

  elementDom.appendChild(canvasDiv);

＆＃13;

var impVolId = "idImpVolume";

var OverviewData = {
  "ImpDiskSpace": [{
    "Application": "LOS",
    "Server": "192.168.1.1",
    "DriveLetter": "D",
    "DriveLabel": "Local Drive",
    "SizeUsed": 450,
    "SizeFree": 50,
    "Threshold": [440, 480] //[ warning,critical]
  }, {
    "Application": "RAS",
    "Server": "192.168.3.2",
    "DriveLetter": "H",
    "DriveLabel": "RAS1",
    "SizeUsed": 460,
    "SizeFree": 40,
    "ThresholdWarning": 440,
    "ThresholdCritical": 480
  }]
}



var chart$ = (function() {

  var charts = [];

  var MakeDoughnut = function(canvasId, inputData, title) {
    if (canvasId !== null && canvasId !== undefined && canvasId.length > 0) {
      //valid canvas id
      if (inputData && inputData.length > 0) {
        // valid data
        if (title && title.length >= 0) {
          return drawChart(canvasId, "doughnut", ["Used", "Free"], inputData, title);
        } else {
          console.error("MakeDoughnut - invalid chart Title");
          return;
        }
      } else {
        //no data
        console.error("MakeDoughnut - invalid chart data");
        return;
      }
    } else { //invalid canvas id
      console.error("MakeDoughnut - invalid canvas id");
      return;
    }
  }

  function drawChart(canvasId, type, labels, inputData, title) {
    charts[canvasId] = new Chart(document.getElementById(canvasId), {
      type: type,
      data: {
        borderWidth: 5,
        labels: labels,
        datasets: [{
          backgroundColor: ["#008000", "#FF00FF", "#808000", "#00FF00", "#00FFFF", "#008080", "#0000FF", "#000080"],
          data: inputData
        }]
      },
      options: {
        cutoutPercentage: 70,
        title: {
          display: true,
          text: title,
          //   position:'left' //defaults to 'top'
        }
      }
    });
    return (charts[canvasId] !== null);
  }

  return {
    MakeDoughnut: MakeDoughnut,
  }
}());

var ui$ = (function() {
  var BuildDiskspace = function(parentId, inputData) {

    if (parentId == null || parentId.length <= 0) {
      console.error("BuildDiskspace : Root container id is invalid!")
      return false;
    }

    if (inputData == null || inputData.length <= 0) {
      console.error("BuildDiskspace : Input data is null/undefined or has no items in it!")
      return false;
    }
    var strHtml = "";
    var elementDom = document.getElementById(parentId);
    for (var index = 0; index < inputData.length; index++) {
      var element = inputData[index];
      var canvasId = "diskCanvasId" + index;

      var canvasDiv = document.createElement('div');
      canvasDiv.setAttribute("style", "width:400px");
      var canvasElem = document.createElement('canvas');
      canvasElem.setAttribute("id", canvasId);
      canvasDiv.appendChild(canvasElem)

      elementDom.appendChild(canvasDiv);

      if (!chart$.MakeDoughnut(canvasId, [element.SizeUsed, element.SizeFree], element.Server + " - " + element.DriveLetter + " : " + element.DriveLabel)) {
        console.error("BuildDiskspace : Error While building Chart for diskspace!");
        continue;
      }
    }
    return true;
  }
  var showElement = function(elements, display) {

    if (display) {
      for (var i = 0; i < elements.length; i++) {
        document.getElementById(elements[i]).style.display = display;
      }
    } else {
      for (var i = 0; i < elements.length; i++) {
        document.getElementById(elements[i]).style.display = "block";
      }
    }
  };
  return {
    BuildDiskspace: BuildDiskspace,
    showElement: showElement
  };

})();


if (ui$.BuildDiskspace(impVolId, OverviewData.ImpDiskSpace)) {
  ui$.showElement([impVolId], "flex");
} else {
  ui$.showElement([impVolId], "flex");
  document.getElementById(impVolId).innerHTML = "<h4>All is Well !!</h4>";
}

＆＃13;

.flex-flow-row {
  display: flex;
  overflow-y: hidden;
  overflow-x: auto;
  flex-direction: row;
  flex-grow: 1;
}

＆＃13;

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<div id="idImpVolume" class="flex-flow-row" style="display:none;">
</div>

＆＃13;

Fiddle演示

使用chart.js的动态图表

1 个答案: