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

【问题标题】：Clone CanvasJS chart to modal using jQuery使用 jQuery 将 CanvasJS 图表克隆为模态
【发布时间】：2017-04-01 18:58:10
【问题描述】：

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

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

我在一篇文章中读到无法克隆 CanvasJS (here)，有人可以确认吗？如果没有，任何人都可以告诉我哪里出错了，或者就如何实现我想要的东西给我建议？下面带有模态屏幕截图的最小工作示例。

附言我也是 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("");
}

【问题讨论】：

您可以将画布输出为图像——不知道这是否对您有帮助。 stackoverflow.com/questions/923885/…
很遗憾，我希望图表的缩放和平移功能继续使用。不过，为这个建议喝彩。
克隆画布只能给你一张图片。如果您希望事件也能正常工作，请对两个图表使用相同的选项，即弹出模式和另一个图表。

标签： javascript jquery html css canvasjs

【解决方案1】：

已经在画布上的人确认（请参阅here），无法通过事件进行克隆。相反，必须在 modal 上呈现具有相同数据的新图。

【讨论】：