Printing c3.js Diagramm ohne vermasselt Funktionalität

Ich habe folgendes c3.js Diagramm:Printing c3.js Diagramm ohne vermasselt Funktionalität

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>

Chart:

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)

Der " Drucktabelle“Schaltfläche, die ich umgesetzt habe macht folgendes:

speichert die HTML ursprüngliche Seite
den HTML-Code nur das Diagramm speichert
die HTML-Seite setzt auf die HTML des Diagramms
druckt die Seite (also nur die Grafik auf der Seite angezeigt) (so Druck effektiv nur das Diagramm)
setzt die Seite HTML zurück zu seinem ursprünglichen HTML

Dies funktioniert jedoch heraus, mein graph ist nicht mehr „dynamisch“ in gewissem Sinne. Beachten Sie, dass vor dem Drucken können Sie die Balken der Graphik schweben über und sie würden Opazität ändern. Nach dem Drucken ist das Diagramm jedoch mehr oder weniger ein reines HTML-Bild dessen, was es einmal war. Wie kann ich meine Druckfunktion neu implementieren, um sicherzustellen, dass mein Diagramm "lebendig" bleibt?

Jede Hilfe wäre willkommen. Vielen Dank!

Quelle

2016-06-30 CdSdw

Vielleicht alles in ein anderes Fenster oder in ein separates div und drucken, dass und entsorgen Sie sie, das Original allein –

verlassen Sie die CSS '@media print {...}' verwenden könnte. –

war Ihr Druck sauber, wie es in html zu sehen ist? Ich versuche, es zu drucken, wie gut – Sandeep

Falls jemand frage mich, was das Beste für mich arbeiten endete:

Ich landete nur die Drucktaste ein Popup-Fenster öffnen, mit bis, kopieren Sie die div Objekt des Diagramms in das Popup-Fenster und Auto - Starten Sie den Druckdialog. Ich hatte auch den Knopf schließen Sie das Popup-Fenster, sobald der Druck fertig war.

Quelle

2016-07-22 15:55:07 CdSdw

Printing c3.js Diagramm ohne vermasselt Funktionalität

Antwort

Verwandte Themen