打印 c3.js 图表而不打乱功能

Question

我有以下 c3.js 图表：

HTML:

<body>
    <div id="chart"></div>
</body>

<input type="button" onclick="printDiv('chart')" value="Print Chart"/>
<script>
 function printDiv(divName){
    var printContents = document.getElementById(divName).innerHTML;
  var originalContents = document.body.innerHTML;

  document.body.innerHTML = printContents;
  window.print();
  document.body.innerHTML = originalContents;
 }
</script>

图表：

blankData=[
  ['data1',0,0,0,0],
  ['data2',0,0,0,0],
  ['data3',0,0,0,0]
]

chartData=[
  ['data1',60,10,4,25],
  ['data2',30,22,5,30],
  ['data3',30,9,4,17]
]

var chart = c3.generate({
    bindto: '#chart',
    size: {
        height: 500,
    },
    data: {
        columns: blankData,
        colors:{
          data1:'#00af50',
          data2:'#F7931E',
          data3: '#FF0000'
        },
        names:{
          data1:'namedata1',
          data2:'namedata2',
          data3:'namedata3'

        },

        type:'bar',

        labels: true,
    },



    tooltip: {
        show: false
    },    
    legend: {
        show: false
    },
    axis: {
        x: {
            type: 'category',
            categories: ['001', '002','003','004'],
             tick: {

             format: function (d) { 
              return "" ; }
            }
        }        
    },
    transition: {
      duration: 2000
    }
});
setTimeout(function () {
    chart.load ({columns: chartData});
 }, 500)

我实现的 "print chart" 按钮执行以下操作：

保存原始页面的HTML
只保存图表的HTML
将页面的 HTML 设置为图表的 HTML（因此页面上只显示图表）
打印出页面（因此有效地只打印出图表）
将页面的 HTML 设置回原来的 HTML

这很好用，但是，从某种意义上说，我的图表不再是 "dynamic"。请注意，在打印之前，您可以将鼠标悬停在图表的条形图上，它们会改变不透明度。不过，在打印之后，该图或多或少是它曾经的纯粹 HTML 图像。我如何重新实现我的打印功能以确保我的图表得到保留 "alive"?

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

万一有人想知道什么对我最有效：

我刚刚让打印按钮打开一个弹出窗口 window，将图表的 div 对象复制到弹出窗口 window，然后自动启动打印对话框.我还让按钮在打印完成后关闭弹出窗口 window。

打印 c3.js 图表而不打乱功能

Printing c3.js chart without messing up functionality

html

javascript

css

printing

c3.js