Javascript 使用jQuery将CanvasJS图表克隆到模式_Javascript_Jquery_Html_Css_Canvasjs

Javascript 使用jQuery将CanvasJS图表克隆到模式

javascript jquery html css

Javascript 使用jQuery将CanvasJS图表克隆到模式,javascript,jquery,html,css,canvasjs,Javascript,Jquery,Html,Css,Canvasjs,我正在尝试使用CanvasJS构建一个仪表板来显示许多图形。每个图形都有一个按钮，用于将特定图形扩展为弹出模式。我是通过找到按钮的祖先div，然后使用jQuery将相关子级克隆到modal来实现的问题是图表无法呈现。由于我目前使用的是CanvasJS的非付费版本，因此底部的水印是存在的。此水印在弹出模式上可见，但图形不可见我在一篇文章中读到克隆CanvasJS是不可能的（），有人能证实这一点吗？如果没有，有人能告诉我哪里出了问题，或者给我建议如何实现我想要的吗？下面是最低限度的工作示例，带有

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

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

我在一篇文章中读到克隆CanvasJS是不可能的（），有人能证实这一点吗？如果没有，有人能告诉我哪里出了问题，或者给我建议如何实现我想要的吗？下面是最低限度的工作示例，带有modal的屏幕截图

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

截图：

HTML:

JS:

var chart1=new CanvasJS.Chart（“Graph1”{
数据：[
{
类型：“区域”，
数据点：[
{x:1，y:1}，
{x:2，y:2}]
}],
});
图表=[chart1]；
window.onload=函数（）{
对于（var i=0；i

由画布上的家伙确认（请参阅），无法用事件克隆。相反，必须在modal上渲染具有相同数据的新图形。

您可以将画布作为图像输出，但不知道这是否有帮助。不幸的是，我不希望图表的缩放和平移功能继续使用。不过，为这个建议干杯。克隆画布只能给你一个图像。如果您希望事件也能正常工作，请对两个图表使用相同的选项，即弹出模式和其他图表。

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

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%;
  }

   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("");
}