问题描述

我正在使用 vue-chartjs 在 web 应用程序上呈现图形.我知道如果您使用原始 库，您可以打印图表.但是我不知道如何使用库的 vue 版本来做到这一点.

I am using vue-chartjs to render graphs on a webapp. I know you can print charts if you are using the original library. However I have no idea on how to do it with the vue version of the library.

我在外部charts.js 文件中有我的图表变量

I have my charts variable on an external charts.js file

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)
  }
}

然后在我的组件模板上我有:

Then on my component template I have:

<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>

任何帮助将不胜感激.

推荐答案

答案是:是的.您在组件脚本中的打印方法可能是:

The answer is: Yes, it is. Your print method in the components' script could be:

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);  
  },
}

您也可以将其添加到组件的样式中:

You can also add this to your component's style:

@media print{
    @page {
        size: landscape
        }
}

这篇关于是否可以使用 vue-chartjs 打印图表?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！