SlidevでGoogl Chartsのグラフをスライドにしてみました。

https://sli.dev/
https://developers.google.com/chart

環境

arch linux
- nodejs
- playwright

構築

プロジェクト作成

npx init slidev

デフォルトのスライドが表示される。Qで終了する。

コンポーネントの作成

cd slidev
npm install vue-google-charts

./components/GoogleCharts.vue

<!-- components/GoogleCharts.vue -->
<script setup lang="ts">
import { GChart } from 'vue-google-charts'

defineProps<{
  type: string
  data: any[]
  options?: object
}>()

const chartSettings = {
  packages: [
    'corechart',
    'geochart',
    'gauge',
    'gantt',
    'sankey',
    'timeline',
    'treemap',
    'wordtree',
    'orgchart'
  ]
}

const defaultOptions = {
  width: '100%',
  height: '350px',
  backgroundColor: 'transparent',
  chartArea: { width: '80%', height: '80%' }
}
</script>

<template>
    <div class="my-google-chart">
        <GChart :type="type" :data="data" :options="{ ...defaultOptions, ...options }" :settings="chartSettings" />
    </div>
</template>

<style scoped>
.my-google-chart {
    width: 100%;
    display: flex;
    justify-content: center;
}
</style>

利用

スライドの作成

./slidev_googlecharts.md

---
theme: default
---

# SlidevでGoogle Chartsを使う

<GoogleCharts
  type="PieChart"
  :data="[
    ['タスク', '時間'],
    ['睡眠', 8],
    ['仕事', 8],
    ['趣味', 4],
    ['その他', 4]
  ]"
  :options="{ title: '1日の時間配分', is3D: true }"
/>

---

# 別のグラフ（棒グラフ）の例

<GoogleCharts
  type="BarChart"
  :data="[
    ['年', '売上', '利益'],
    ['2024', 1000, 400],
    ['2025', 1170, 460],
    ['2026', 660, 1120]
  ]"
  :options="{ title: '業績推移' }"
/>

---

# 世界のデータ（GeoChart）

<GoogleCharts
  type="GeoChart"
  :data="[
    ['Country', 'Popularity'],
    ['Germany', 200],
    ['United States', 300],
    ['Brazil', 400],
    ['Canada', 500],
    ['France', 600],
    ['Japan', 700]
  ]"
/>

npx slidev slides_googlecharts.md

Oで開く。Qで終了する。

PDFエクスポート

npx playwright install
npm i -D playwright-chromium
sudo npx playwright install-deps
paru -S playwright

Slidev - Google Charts

環境

構築

プロジェクト作成

コンポーネントの作成

利用

スライドの作成

PDFエクスポート

PNGエクスポート

アドオン化

アドオン側

利用