使用 jQuery 将 CanvasJS 图表克隆为模态

Question

我正在尝试构建一个仪表板以使用 CanvasJS 显示许多图表。每个图表都有一个按钮，用于将该特定图表扩展为弹出模式。我通过找到按钮的祖先 div 然后使用 jQuery 将相关子项克隆到模态来做到这一点。

问题是图表没有呈现。由于我目前使用的是 CanvasJS 的非付费版本，底部的水印是存在的。此水印在弹出模式中可见，但图表不可见。

我在一篇 post 中读到，克隆 CanvasJS 是不可能的 (here)，有人可以证实这一点吗？如果没有，任何人都可以告诉我哪里出了问题或给我建议如何实现我想要的吗？下面的最小工作示例带有模态屏幕截图。

p.s。我也是 HTML/CSS/JS 的新手。这是我第一次与这些技术人员合作。

截图：

HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <title>MWE</title>
        <meta charset="utf-8" />
        <meta name="SG-Dashboard" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="assets/css/main.css" />
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script src="assets/js/jquery-3.2.0.min.js"></script>
    </head>
    <body>

    <article>
      <!-- Modal to expand graphs into -->
      <div id="graphModal" class="graph-modal">
        <button type="button" class="modal-cls-btn" onclick="closeGraphModal()">
            <i class="fa fa-compress fa-1x"></i>
        </button>
        <div id="graphModalBox" class="graph-modal-box"></div>
      </div>

      <!-- Graph 1 -->
      <div class="graph-box">
        <!-- Graph 1 header-->
        <div class="graph-box-header-button-container">
          <button type="button" id="graph-box-exp-btn" class="graph-btn" onclick="expandGraphModal(this)">
            <i class="fa fa-expand fa-1x"></i>
          </button>
        </div>
        <div class="canvasjs-container">
          <div id="Graph1" class="canvasjs-chart"></div>
        </div>
      </div>

    </article>

    <script src="assets/js/main.js"></script>

  </body>
</html>

CSS:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,        blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }

  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
  }

  html, body{
    min-height: 100%;
  }

  body {
    line-height: 1;
    background-color: #fafafa;
    background-image: url("images/bg.png");
    font-size: 13pt;
  }


  article {
    height: 100%;
    min-width: 100%;
  }

  /* The modal background */
  .graph-modal {
     display: none;
     position: fixed;
     z-index: 1;
     left: 0;
     top: 0;
     min-width: 100%;
     max-height: 100%;
     height: 100%; /* Required for graph-modal-box height */
     background-color: rgba(0,0,0,0.4);
  }

  .graph-modal-box {
    display: block;
    position: relative;
    margin: 5% auto;
    background: #fff;
    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    /*min-height: 700px;
    max-height: 700px;*/
    min-height: 80%;
    max-height: 80%;
    min-width: 80%;
    max-width: 80%;
  }

  .modal-cls-btn {
    background-color: #414042;
    border: 0;
    float: right;
    margin: 10px;
  }

  .graph-box {
    /*position: relative;*/
    background: #fff;
    box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    margin: 0.3em;
    vertical-align: top;
    min-height: 200px;
    max-height: 220px;
    min-width: 20%;
  }

  .graph-box-header-button-container {
    max-width: 25%;
    min-height: 20%;
  }

  .graph-btn {
    background-color: #414042;
    border: 0;
    cursor: pointer;
  }

  .canvasjs-container{
    width: 100%;
    height: 80%;
  }

  .canvasjs-chart{
    width: 100%;
    height: 100%;
  }

JS:

   var chart1 = new CanvasJS.Chart("Graph1", {
   data: [
   {
     type: "area",
     dataPoints: [
       {x: 1, y: 1},
       {x: 2, y: 2}]
   }],
});

charts=[chart1];

window.onload = function () {
  for (var i = 0; i < charts.length; i++) {
    var chart = charts[i];
    // chart.options.title.text += ": Updated";
    chart.render();
  }
}

// ------------Graph Modal----------------------//
// Get the modal
var graphModal = document.getElementById('graphModal');

function expandGraphModal(elem) {
  // get ancestor div
  var btnAnsestor = elem.closest(".graph-box");
  // Clone header and chart
  var modalGraph = btnAnsestor.getElementsByClassName("canvasjs-container")[0];

  // clone ancestor div and place in modal
  $("#graphModalBox").append($(modalGraph).clone(true));

  // // Render the graph
  chart1.render();
  graphModal.style.display = "block";
}

function closeGraphModal(){
  graphModal.style.display = "none";
  $("#graphModalBox").html("");
}

Answer 1

由 canvas 的人员确认（参见 here），无法使用事件进行克隆。相反，必须在模态上呈现具有相同数据的新图形。

使用 jQuery 将 CanvasJS 图表克隆为模态

Clone CanvasJS chart to modal using jQuery

html

javascript

css

jquery

canvasjs