0
をめちゃくちゃにせずにチャートをc3.js I以下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)
」私が実装した「プリントチャート」ボタンは、以下を実行します：
- は（ページアウト（これだけのチャートがページに示されている）元のページのHTML
- がちょうどチャート
- のHTMLチャートのHTMLをページのHTMLを設定し、保存し
- プリントを節約しますその効果
- は私のグラフは、もはや意味で「ダイナミック」である、しかしこれは、正常に動作元のHTML
へページのHTMLを設定していない）だけでチャートをプリントアウトします。印刷する前に、グラフのバーにカーソルを置くと不透明度が変わることに注意してください。しかし、印刷後、グラフは多かれ少なかれ、それがかつてあったものの純粋なHTML画像になります。私の印刷機能を再実装して、グラフが「生きている」ように保たれるようにするにはどうすればよいですか？
ご協力いただければ幸いです。ありがとう！
多分、別のウィンドウや別のdivに入れて、それを印刷して捨ててください。オリジナルはそのままです。 –
CSS '@media print {...}'を使うことができます。 –
はあなたの印刷物がhtmlで見られるようにきれいでしたか？私もそれを印刷しようとしています。 – Sandeep