Question

当用户点击按钮时，将创建一个图表..此代码只是克隆主图表。由于主图表发生变化，用户可以多次点击几个主图表。目前，当再次点击该按钮时，它将删除上一个图表。

单击按钮时，将调用getChart函数，并将原始图表克隆到试验div中。但由于原始图表可以更改，因此用户可以将多个克隆的不同类型的图表添加到试验div中？

 function getChart() {
      google.visualization.events.addListener(wrapper, 'ready', onReady);
          function onReady() {
            google.visualization.events.addListener(wrapper.getChart(), 'click');
          }
        var trialChart = wrapper.clone();
        trialChart.setContainerId('trial');
        trialChart.draw();
    }

Answer 1

这可能是你正在寻找的......

克隆被添加到试验 div，
而不是替换试验 div

中的图表

因此在按下克隆按钮时会保存每个图表

＆＃13;

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', '2015');
    data.addColumn('number', '2016');
    data.addRows([
       [new Date('01/01/2016'), 200, 210],
       [new Date('01/02/2016'), 190, 220],
       [new Date('01/03/2016'), 205, 200],
       [new Date('01/04/2016'), 220, 230],
       [new Date('01/05/2016'), 212, 210],
       [new Date('01/06/2016'), 185, 193],
       [new Date('01/07/2016'), 196, 207]
    ]);

    var chart = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chart_orig',
      dataTable: data,
      options: {
        height: 400
      }
    });

    google.visualization.events.addOneTimeListener(chart, 'ready', function () {
      document.getElementById('cloneBtn').addEventListener('click', function () {
        var trialChart = chart.clone();
        var chartDiv = document.getElementById('chart_trial').appendChild(document.createElement('DIV'));
        chartDiv.id = 'div-' + (new Date()).getTime();
        trialChart.setContainerId(chartDiv.id);
        trialChart.draw();
      }, false);
    });

    chart.draw();
  },
  packages: ['corechart']
});

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<input type="button" id="cloneBtn" value="Clone" />
<div>Original Chart</div>
<div id="chart_orig"></div>
<div>Trial Chart</div>
<div id="chart_trial"></div>

＆＃13;

有没有办法让谷歌图表附加到一个div？

1 个答案: