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)

＆＃34;打印图表＆＃34;我已实施的按钮执行以下操作：

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

这很好用，但是，我的图表不再是＆＃34;动态＆＃34;从某种意义上说。请注意，在打印之前，您可以将鼠标悬停在图形的条形图上，它们会改变不透明度。但是，在打印之后，图形或多或少是纯粹的HTML图像。如何重新实现我的打印功能，以确保我的图表保持＆＃34;活着＆＃34;？

任何帮助将不胜感激。谢谢！

Answer 1

如果有人想知道最终对我有用的是什么：

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

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

1 个答案:

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

1 个答案:

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