Data Visualize

with Vue

Who?

Twitter @babywkb

Github babywkb

👨‍💻Developper @TIS.inc

Work

・Java(Spring)

・React

Hobby😍

・Vue

・Firebase

データの可視化

折れ線グラフ、棒グラフ、円グラフ、分布図...etc

ライブラリ

比較してみた

?

Chart.js

https://www.chartjs.org/

canvas要素にグラフが書き出される
シンプルなグラフを低コストで作れる
Vue Wrapperがある(https://vue-chartjs.org/)
主要なグラフの種類が用意されている

基本的ななグラフが揃ってる

https://www.chartjs.org/docs/latest/charts/

シンプルなので

各チャートのPropertiesを知れば

使い始められる

 <LineChart　:chartData="chartData"></LineChart>

import LineChart from "@/components/LineChart.vue";

@Component({ components: { LineChart } })
export default class View extends Vue {
  private chartData: Chart.ChartData | null = null;
  
  public mounted() {
    this.chartData = {
      labels:  ["10/5", "10/7", "10/9","10/10"],
      datasets: [
        {
          type: "line",
          label: "タイトル",
          data: [1,4,2,5],,
          fill: true,
          borderColor: "#AAFFAA"
        }
      ]
    };
  }

}

@Component({})
export default class LineChart extends Mixins(Line,mixins.reactiveProp) {
  @Prop() public chartData!: Chart.ChartData;
  @Prop() public chartOptions?: Chart.ChartOptions  = {responsive: true,maintainAspectRatio: false};
  @Prop() public dataSource!: String;
  
  constructor() {
    super();
  }
  public mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  }
}

↓

シンプルで簡単

?

amCharts

https://www.amcharts.com/

SVG要素にグラフが書き出される
リッチなグラフを低コストで作れる
めちゃくちゃ豊富な種類のグラフが用意されている
GeoJSON使った地図表示が楽にできるのが👍
左下に出るロゴを気にしないなら商用利用無料

Vueで折れ線グラフを出すチュートリアル(公式)

https://www.amcharts.com/docs/v4/getting-started/integrations/using-vue-js/

<template>
  <div class="hello" ref="chartdiv">
  </div>
</template>

<script>
//略
  mounted() {
    let chart = am4core.create(this.$refs.chartdiv, am4charts.XYChart);
    
    //chart.data に表示用データを入れたり、x軸y軸の情報入れたり
    
    this.chart = chart;
　　}
  //略
  </script>