PHP と Vue.js を使用して統計グラフをエクスポートおよび印刷する方法

PHP と Vue.js を使用して統計グラフのエクスポートおよび印刷機能を実装する方法

統計グラフのエクスポートおよび印刷は、Web アプリケーションでは一般的な要件です。 PHP と Vue.js を使用すると、そのような機能を簡単に実装できます。この記事では、これら 2 つのテクノロジを使用して統計グラフのエクスポートおよび印刷機能を実装する方法と、対応するコード例を紹介します。

1. 準備
   まず、グラフを生成するための統計グラフ ライブラリが必要です。この例では、統計グラフ作成ライブラリとして ECharts 4 を使用します。 ECharts 公式 Web サイト (https://www.echartsjs.com/) からライブラリ ファイルの最新バージョンをダウンロードして、プロジェクトに含めることができます。
2. 統計グラフの作成
   次に、Vue.js を使用して簡単な統計グラフを作成します。以下は棒グラフの例です。

<template>
  <div class="chart-container">
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.renderChart()
  },
  methods: {
    renderChart() {
      // 统计数据
      const data = {
        categories: ['A', 'B', 'C', 'D', 'E'],
        series: [
          {
            name: '数据1',
            data: [20, 30, 15, 40, 25]
          },
          {
            name: '数据2',
            data: [10, 15, 25, 20, 30]
          }
        ]
      }

      // 配置项
      const options = {
        title: {
          text: '统计图表'
        },
        legend: {
          data: data.series.map(item => item.name)
        },
        xAxis: {
          data: data.categories
        },
        yAxis: {},
        series: data.series.map(item => ({
          name: item.name,
          type: 'bar',
          data: item.data
        }))
      }

      // 渲染图表
      this.chart.setOption(options)
    }
  }
}
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 400px;
}

.chart {
  width: 100%;
  height: 100%;
}
</style>

3. グラフのエクスポート
   グラフを画像または PDF にエクスポートする場合、echarts.getInstanceByDom(element) を使用できます。 echarts によって提供される) メソッドでチャート インスタンスを取得し、対応するインターフェイスを呼び出してチャートをエクスポートします。

まず、エクスポート機能を実装するために、html2canvas と jspdf を導入する必要があります。最新バージョンのライブラリ ファイルは、公式 Web サイト (https://html2canvas.hertzen.com/、https://github.com/MrRio/jsPDF) からダウンロードできます。

次に、Vue コンポーネントの methods にグラフをエクスポートするメソッドを追加します。

export default {
  methods: {
    exportChart() {
      // 获取图表实例
      const chartInstance = echarts.getInstanceByDom(this.$refs.chart)

      // 导出为图片格式
      chartInstance
        .capture()
        .then(canvas => {
          const imageData = canvas.toDataURL("image/png")
          const link = document.createElement("a")
          link.href = imageData
          link.download = "chart.png"
          link.click()
        })
        .catch(error => console.error(error))

      // 导出为PDF格式
      chartInstance
        .capture()
        .then(canvas => {
          const imageData = canvas.toDataURL("image/png")
          const pdf = new jsPDF()
          pdf.addImage(imageData, "PNG", 0, 0)
          pdf.save("chart.pdf")
        })
        .catch(error => console.error(error))
    }
  }
}

テンプレートにエクスポート ボタンを追加し、exportChart# をバインドします。 ## メソッド:

<template>
  <div>
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
    <button @click="exportChart">导出图表</button>
  </div>
</template>

Print Chart
4. チャートを PDF 形式で印刷するには、同じメソッドを使用してチャートを画像としてエクスポートし、jsPDF ライブラリを使用してPDF ドキュメントに変換して印刷します。
   

Vue コンポーネントの

methods にチャートを印刷するメソッドを追加します。

export default {
  methods: {
    printChart() {
      // 获取图表实例
      const chartInstance = echarts.getInstanceByDom(this.$refs.chart)

      // 导出为图像
      chartInstance
        .capture()
        .then(canvas => {
          const imageData = canvas.toDataURL("image/png")
          const pdf = new jsPDF()
          pdf.addImage(imageData, "PNG", 0, 0)
          pdf.autoPrint()
          window.open(pdf.output('bloburl'), '_blank')
        })
        .catch(error => console.error(error))
    }
  }
}

テンプレートに印刷ボタンを追加し、

printChart をバインドします。 方法:

<template>
  <div>
    <div class="chart-container">
      <div ref="chart" class="chart"></div>
    </div>
    <button @click="printChart">打印图表</button>
  </div>
</template>

ここまで、PHPとVue.jsを利用して統計図をエクスポート・印刷する機能を実装しました。上記の手順により、グラフを画像または PDF として自由にエクスポートしたり、任意の場所にグラフを印刷したりすることができます。

この記事があなたのお役に立てば幸いです。また、PHP と Vue.js を使用した Web アプリケーションの開発が成功することを願っています。

以上がPHP と Vue.js を使用して統計グラフをエクスポートおよび印刷する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。