Создайте составную диаграмму с помощью Vue и Chart.js

Создайте диаграмму, представляющую собой комбинацию двух разных типов диаграмм: линейной и столбчатой.

Введение

В этом уроке я покажу вам, как создать смешанную диаграмму с помощью chart.js (2.9.4) в приложении, использующем vue.js (2.x) в качестве фреймворка.

Окончательный вывод будет следующим:

Код

Создайте приложение с помощью vue cli

npm install -g @vue/cli
vue create hello-world
> Default ([Vue 2] babel, eslint)

Теперь установите chart.js

npm install [email protected]

Нам также понадобится библиотека для вычисления скользящей средней.

npm i moving-averages

Теперь мы создаем компонент, содержащий диаграмму, RevenueChart.vue:

<template>
    <div style="width: 800px; height: 600px;">
        <canvas id="revenue-chart"></canvas>
    </div>
</template>

<script>
    import Chart from 'chart.js'
    import revenueChartData from './revenue-data.js'

    export default {
        name: 'RevenueChart',
        data() {
            return {
                revenueChartData: revenueChartData
            }
        },
        mounted() {
            const ctx = document.getElementById('revenue-chart');
            new Chart(ctx, this.revenueChartData);
        }
    }
</script>

Данные и конфигурация диаграммы берутся из внешнего файла javascript, revenue-data.js.

import {
    ma
} from 'moving-averages'

let revenueData = [60, 55, 65, 70, 65, 75, 80, 90, 110, 120, 90, 100,
                    80, 70, 100, 130, 80, 65];
let movingAvg = ma(revenueData, 3);
for(let i = 0; i < movingAvg.length; i++) {
    if(movingAvg[i]) movingAvg[i] = movingAvg[i].toFixed(2);
}

export const revenueChartData = {
    type: "bar",
    data: {
        labels: ["Jan 2000", "Feb 2000", "Mar 2000", "Apr 2000",
            "May 2000", "Jun 2000", "Jul 2000", "Aug 2000", "Sep 2000",
            "Oct 2000", "Nov 2000", "Dec 2000", "Jan 2001", "Feb 2001",
            "Mar 2001", "Apr 2001", "May 2001", "Jun 2001",],
        datasets: [
            {
                label: "Moving Average (3)",
                type: "line",
                data: movingAvg,
                backgroundColor: "rgba(61,196,122,.5)",
                borderColor: "#3DC47A",
                borderWidth: 3
            },
            {
                label: "Total Revenue (k)",
                type: "bar",
                data: revenueData,
                backgroundColor: "rgba(61, 157,196,.5)",
                borderColor: "#3D9DC4",
                borderWidth: 3
            }
        ]
    },
    options: {
        //responsive: true,
        lineTension: 1,
        tooltips: {
            // Overrides the global setting
            mode: 'label'
        },
        scales: {
            yAxes: [
                {
                    ticks: {
                        beginAtZero: true,
                        padding: 25
                    }
                }
            ],
            xAxes: [{
                ticks: {
                    autoSkip: false,
                    maxRotation: 65,
                    minRotation: 65
                }
            }]
        }
    }
};

export default revenueChartData;

Теперь в App.vue можно использовать компонент RevenueChart.

<template>
  <div id="app">
    <RevenueChart />
  </div>
</template>

<script>
import RevenueChart from "./components/RevenueChart";
export default {
  name: 'App',
  components: {
    RevenueChart
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Гитхаб

Вы можете найти код здесь: CertosinoLab/mediumarticles at vue-bar-line-chart (github.com)

Спасибо за чтение!