有可能用vue-chartjs打印图表吗？
有可能用vue-chartjs打印图表吗？
提问于 2018-11-12 21:20:01
我使用vue-chartjs在webapp上呈现图形。我知道如果你使用的是原始的图书馆，你可以打印图表。然而，我不知道如何使用vue版本的库。
我的图表变量在一个外部charts.js文件上
import {Bar, mixins } from 'vue-chartjs'
Chart.defaults.global
let chartOptions = Chart.defaults.global;
const { reactiveProp } = mixins
export default {
extends: Bar,
mixins: [reactiveProp],
props: ['options'],
mounted () {
let that = this;
that.chartOptions = {
scales: {
yAxes: [{
ticks: {
suggestedMin: 0,
fontFamily: "'Overpass_Mono', 'Monaco', monospace",
fontColor: "rgba(254, 255, 248, 0.5)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'rgb(168, 119, 181)',
zeroLineWidth: 2
},
}],
xAxes: [{
ticks: {
suggestedMin: 0,
fontColor: "rgb(168, 119, 181)"
},
gridLines: {
color: 'rgba(255, 80, 248, 0.08)',
zeroLineColor: 'transparent',
}
}],
},
legend: {
labels: {
fontColor: 'rgb(168, 119, 181)',
}
}
},
this.renderChart(this.chartData, that.chartOptions)
}
}然后，在我的组件模板上有：
<template>
<div class="report">
<charts v-if="todaySelected"
:chart-id="'total_visits_chart_bar'"
:height="chartsHeight"
:options="chartOptions"
:chart-data="datacollection"
></charts>
<div v-if="todaySelected">
<button @click="printChart(charts)">Print chart</button>
</div>
</template>
<script>
import charts from './chart_0.js'
components: {
charts,
},
data() {
return{
datacollection: {"datasets":[{"label":"Entries Today","data":[15,15,15,0]},{"label":"Currently Inside","data":[2,2,2,0]}],"labels":[]}
}
}.
methods: {
printChart(charts) {
charts.print();
},
}
</script>任何帮助都将不胜感激。
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-11-13 13:26:34
答案是:是的，是的。组件脚本中的打印方法可以是：
methods:{
printChart() {
var canvasEle = document.getElementById('total_visits_chart_bar');
var win = window.open('', 'Print', 'height=600,width=800');
win.document.write("<br><img src='" + canvasEle.toDataURL() + "' />");
setTimeout(function(){ //giving it 200 milliseconds time to load
win.document.close();
win.focus()
win.print();
win.location.reload()
}, 200);
},
}还可以将其添加到组件的样式中：
@media print{
@page {
size: landscape
}
}Stack Overflow用户
发布于 2018-11-14 09:54:14
vue-chartjs是基于chart.js而不是canvas.js的，因此它没有“内置”的打印方式。
您必须使用一些自定义逻辑和本机javascript打印函数来完成此操作。
但是，您可以在图表组件中获取画布元素，并生成一个图像，然后打印该图像。
它会变得有点棘手，因为您只能访问图表组件中的画布。因此，您可能需要等待一个事件或支持来触发toDataURL调用，然后将映像发送到您的父组件，在那里您可以打印它。如果要在父组件中触发打印，请执行以下操作。
methods: {
print () {
// grab the canvas and generate an image
let image = this.$refs.canvas.toDataURL('image/png')
// Emits an event with the image
this.$emit('chart:print', image)
}
}在父组件中：
<template>
<your-chart @chart:print="handlePrint"
<template/>
....
...
methods: {
handlePrint(image) {
const win = window.open('', 'Print', 'height=600, width=800')
win.document.write(`<br><img src='${image}' />`)
win.print()
win.close()
}
}Stack Overflow用户
发布于 2018-11-12 22:47:54
这个库似乎是基于chartjs而不是canvasjs https://www.chartjs.org/docs/latest/的，您可能想了解如何打印窗口快速打印HTML5帆布，并记住您可以访问绘制图形的画布元素：
methods: {
printChart() {
const canvasEle = this.$el.querySelector('canvas');
//now your chart image is on canvasEle
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53270288
复制相关文章
相似问题
腾讯云开发者
