在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):devstark-com/vue-google-charts开源软件地址(OpenSource Url):https://github.com/devstark-com/vue-google-charts开源编程语言(OpenSource Language):TypeScript 69.0%开源软件介绍(OpenSource Introduction):vue-google-chartsReactive Vue.js wrapper for Google Charts lib Installation • Usage • Slack • Examples Installationpnpm add vue-google-charts
# or
yarn add vue-google-charts
# or
npm i vue-google-charts Need an API to fetch data? Consider Cube, an open-source API for data apps. Default importThis package works with version 2.x and 3.x of Vue. Use locally in a component: import { GChart } from 'vue-google-charts'
export default {
components: {
GChart
}
} For Vue 2 projects, you need to import from import { GChart } from 'vue-google-charts/legacy' UsageRead the Google Charts docs firstThe With Another bonus — reactive data binding. A chart will be redrawn automatically once Simple usage: <GChart
type="ColumnChart"
:data="chartData"
:options="chartOptions"
/> export default {
data () {
return {
// Array will be automatically processed with visualization.arrayToDataTable function
chartData: [
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
],
chartOptions: {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
}
}
}
}
} Load additional packages: <GChart
:settings="{ packages: ['corechart', 'table', 'map'] }"
type="Map"
:data="chartData"
:options="chartOptions"
/> Using See more on available setting There's also See more on available versions Add event listeners: <GChart
type="ColumnChart"
:data="chartData"
:options="chartOptions"
:events="chartEvents"
/> export default {
data () {
return {
// {
// eventName: handlerFunction,
// eventName: handlerFunction,
// }
chartEvents: {
'select': () => {
// handle event here
}
}
}
}
}
Use |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论