如何在Vue.js中使用vue- google -charts包装器创建谷歌折线图？
在Vue.js中使用vue-google-charts包装器创建谷歌折线图，可以按照以下步骤进行：
- 首先，确保已经安装了Vue.js和vue-google-charts包。可以使用npm或yarn进行安装。
- 在Vue组件中引入vue-google-charts包装器。可以使用import语句将其导入到组件中。
import VueGoogleCharts from 'vue-google-charts';- 在Vue组件的
components选项中注册vue-google-charts。
components: {
VueGoogleCharts,
},- 在Vue组件的模板中，使用vue-google-charts包装器创建一个div容器，并设置相应的属性。
<template>
<div>
<vue-google-charts :data="chartData" :options="chartOptions" type="LineChart"></vue-google-charts>
</div>
</template>- 在Vue组件的
data选项中定义图表的数据和选项。
data() {
return {
chartData: [
['Year', 'Sales', 'Expenses'],
['2015', 1000, 400],
['2016', 1170, 460],
['2017', 660, 1120],
['2018', 1030, 540],
],
chartOptions: {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' },
},
};
},- 最后，根据需要，可以在Vue组件的生命周期钩子函数中对图表进行更新或其他操作。
mounted() {
// 在组件挂载后，可以通过调用相应的方法对图表进行更新或其他操作
},这样，就可以在Vue.js中使用vue-google-charts包装器创建谷歌折线图了。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
相关·内容
如何在Vue.js中使用vue-google-charts包装器创建折线图。 例如，如何将行和列添加为数据。 Vanilla JS版本示例如下： var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10],
)], 既然我们在这里没有使用arrayDatatotable，那么它是如
浏览 12提问于2019-01-31得票数 0
我的任务是使用vue- Google -charts格式化图表中的一些列，vue-google-charts是一个用于谷歌图表的vue.js包装器，我甚至不确定vue-google- charts是否支持'NumberFormat()‘。
首先，如果有人知道它是不是，我想知道，这样我就不会浪费太多的时间去追求一些不可能的事情。但如果是这样，我肯定会喜欢一个如何做到这一点的例子。
我们要做的是从数据库返回图表数据，并将其传递到这个vue.js包装器中。我们正在创建几个图表，但是有一些列中有我们想要删除的逗号。
请查看现有代码。我正在尝试使用@ready来实现这一点，如vue-google
浏览 1提问于2019-06-18得票数 2
2回答
我想在ES6的Vue.js中使用谷歌地图和jquery。
我不希望它是一个组件或任何类似vue-google-map的东西。我只想导入谷歌地图，像我一直使用的那样使用。
我已经让jquery这样工作了。
import jQuery from 'jquery'
var jq = window.Jquery = jQuery
现在我想对google地图做同样的事情，这样我就可以访问'google‘变量了。并在mounted()方法中使用它。像这样..。
export default {
mounted () {
var map
浏览 2提问于2017-04-06得票数 1
1回答
您好，我正在尝试使用谷歌图表中的折线图()，但我不知道用于获取过去30天内每天有多少患者进入医院的查询，以便我可以将其添加到折线图上的data.addrow中。以下是我的表的样子：
pPatient
pName pDate
Sample Name 2017-08-15
Another Name 2017-08-15
Another Name Again 2017-08-15
Name Here 2017-08-14
Name Again 2017-08-13
我需要一个s
浏览 14提问于2017-08-16得票数 0
回答已采纳
1回答
如何绘制显示销售报告小时的谷歌折线图，我在谷歌搜索，我找到了一个解决方案折线图，但它需要两个项目，但我只需要每小时的销售额折线图。我尝试删除第二个数量，但我得到了错误。我试着用下面的代码
<html>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
</html>
<script&
浏览 1提问于2017-02-20得票数 0
我使用vue- google图表包()在我的应用程序(vuejs2.x)中显示谷歌图表，直到现在它运行得非常好。
但是现在我得到了以下错误：
Uncaught (承诺中) TypeError: n.load不是vue-google-charts.common.js:1在vue-google-charts.common.js:1在新的承诺()在vue-google-charts.Common.js:1
在我的代码中，会显示以下消息：
我在几篇文章中读到，我可以创建一个文件vendor.d.ts，并将以下内容放入其中：
declare module 'vue-google-cha
浏览 2提问于2021-11-12得票数 1
回答已采纳
我在我的reactjs应用程序中使用react- google -charts来创建google折线图。我没有找到任何关于这个插件的详细文档。
我有几个问题：
a)如何指定scaleStepWidth？b)如何在折线图中创建pointDot？
浏览 1提问于2018-03-06得票数 0
我正在尝试使用Google Docs中的创建物料折线图示例，但我无法确定折线图使用的JSON格式。如何显示DataTable对象的JSON？
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number
浏览 3提问于2017-07-18得票数 0
我开始学习Vue.js，可以独立使用Google Charts，但不能让vue-google-charts组件工作。根据这里的说明，我已经包含了vue.js和vue-google-charts.js https://github.com/devstark-com/vue-google-charts#browser，但图表没有呈现，并得到以下错误消息 Unknown custom element: <gchart> 示例可在此处查看https://jsfiddle.net/ugLc0zrj/ 我做错了什么？
浏览 37提问于2021-05-07得票数 0
回答已采纳
我正在使用charts_flutter包在我的flutter应用程序中显示图表，据我所知，我们使用labelAccessorFn在饼图中显示标签，但它不适用于时间序列折线图。 对于条形图，我们可以添加标签，如下所示https://google.github.io/charts/flutter/example/bar_charts/horizontal_bar_label 我想对时间序列折线图实现同样的方法。 所以我添加了labelAccessorFn: (TimeSeriesSales sales, _) => sales.sales.toString()， 在https://gith
浏览 18提问于2019-06-04得票数 0
1回答
我正在尝试创建一个js对象来绘制google折线图。我的问题是google.charts.load中的回调具有不同的上下文，因此我不能使用属性this._data MyNewObject = SomeOldObject.extend({
initialize: function (data, options) {
this._data = data;
google.charts.load('current', {
'packages': ["line", "corechar
浏览 10提问于2019-02-27得票数 0
回答已采纳
我想将我用google charts api制作的折线图转换成image.How，我应该怎么做?我在网上找不到任何可以帮助我的东西。
浏览 0提问于2013-04-06得票数 1
回答已采纳
1回答
如何在条形图中使用vue-google-charts包装器在Vue.js中创建筛选器类别。
我已经创建了堆叠条形图，我想添加过滤器的标签内的图例。
这里是我的vue应用程序
它是如何使用Vue-google-charts包装完成的？
谢谢你的问候，德德
浏览 1提问于2021-10-09得票数 0
回答已采纳
我正在尝试使用Google Charts Api在我自己的应用程序中复制Google Analytics图表的行为。
在Google Analytics中，每当我将鼠标悬停在两个数据集都在选择的日期上时，我就会得到该日期的两个值的组合工具提示。
在这里的文档中找不到任何东西： ...也没有关于谷歌的信息。
LE:因为我发现GA图表是面积图，而不是折线图: Checked：，但仍然找不到一种方法来模拟GA图表的行为……
浏览 0提问于2020-03-25得票数 1
3回答
我使用Google Chart API (不是Google Image Chart)创建一个折线图，日期在x轴(下)，数字在y轴(左)。我想添加一个带有字符串标签的r轴(右)。
如果我正确理解了下面的页面，那么只能在长轴上有字符串(折线图的x轴)。次轴(y轴和r轴)只接受连续值(如数字)，不接受离散值(如字符串)。
在Google Image Charts中，可以通过将字符串数据分配给一个值(比如从0到100)来解决这个问题，并使用chxl参数为轴分配自定义字符串标签。如果数据是均匀分布的，这就特别容易。
我已经查看了API参考，但在使用Google Chart API时找不到任何类似的东西
浏览 4提问于2012-03-17得票数 5
我正在尝试使用SCSS在vue-本地项目中对我的元素进行样式化。我刚刚创建了一个新的项目，并与世博一起运行，它运行得很好。然后在我的App.vue中，我试图将<style>改为<style scoped lang='scss'>，我的应用程序崩溃了。
我在vue-本地文档中没有发现任何关于SCSS的信息。所以我试着遵循vue.js文档，我安装了带有npm install -D sass-loader sass的sass加载程序，安装了光纤.我的应用程序无法编译。
那么，vue本机支持是否与SCSS一起工作呢？如果有的话-怎么做？我做错什么了？
浏览 6提问于2020-08-29得票数 4
1回答
你对JS框架使用输入below.Using谷歌图表绘制折线图有什么建议，下面的代码不适用于时间值。
gridVdata =[["11:23:09","6.300000"],["10:47:26","6.300000"],["13:09:36","6.310000"], ["12:31:00","6.400000"],["11:38:45","6.300000"],["12:29:03","6.400000"
浏览 0提问于2017-04-26得票数 0
我使用google注释图从CSV文件成功构建了一个带注释的折线图。(感谢Whitehat的帮助)。
我已经通过google图表示例找到了一种方法来获取折线图的一部分，然后执行两个点之间的一些计算，例如差值和百分比差值，但没有成功。我可能还想做进一步的计算，但目前这两个已经足够了。
从本质上讲，我正在尝试构建一个类似谷歌股票图表的功能
到目前为止的代码：
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.
浏览 0提问于2019-06-03得票数 2
1回答
如何在核心图中实现象限？
、、、
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var a=4;
var b=8;
google.charts.load('current', {'packages':['corechart'
浏览 1提问于2016-12-12得票数 0
我正在尝试使用Google charts来创建折线图，这些折线图在x轴上具有日期时间，在另一轴上具有值。通常这些时间段只有48小时，所以我真的需要在x轴上显示一天中的时间以及日期。
有谁知道如何做到这一点吗？
或者，有没有人可以推荐另一个Javascript图表api来实现这一点呢？
浏览 0提问于2012-07-31得票数 2
我试图创建一个堆叠的条形图，其中有一列的时间使用谷歌应用程序脚本。就像下面的图表。
我创建了下面的google应用程序脚本代码。但是，这不管用。
function createSample(){
var data = Charts.newDataTable()
.addColumn(Charts.ColumnType.STRING, "date")
.addColumn(Charts.ColumnType.TIMEOFDAY, "A") // TIMEOFDAY is not defined in google apps scri
浏览 0提问于2020-02-22得票数 0
回答已采纳
我有一个JSON文件：
[{"date": "2014-01-01","value": 190000000},{"date": "2014-01-02","value": 190379978},{"date": "2014-01-03","value": 90493749},{"date": "2014-01-04","value": 190785250}]
它是可以扩展的。我想通过使用以下代码提取JSO
浏览 0提问于2017-03-02得票数 2
我正在尝试使用Google Charts包创建折线图。我遇到的问题是，我想绘制来自两个Javascript数组的数据。我确实找到了一些代码，展示了如何对条形图执行此操作，但我无法获得相同的代码来创建折线图。这就是我到目前为止所拥有的代码。
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"> </script>
<script
浏览 0提问于2016-03-13得票数 2
我真的很喜欢image-charts.com这项服务。有没有办法在折线图上添加趋势线？我已尝试添加此参数
来自谷歌的trendlines: { 0: {} } (因为这是他们的趋势线代码，而这是由谷歌提供支持的？)
浏览 0提问于2020-02-25得票数 0
1回答
我已经使用Google Charts使用许多不同的数据点绘制了一张折线图。
我想知道如何确定图中任意x值的y值，而不仅仅是数据点。
“我绘制的图表”
例如，我如何找到x= 1000处的y坐标？
如果使用Google Charts不能做到这一点，那么哪个库最适合这项任务？
浏览 4提问于2014-09-08得票数 0
我正在尝试使用谷歌图表以折线图的形式显示mysql数据，我认为问题出在我试图格式化谷歌charts.What的数据时我的代码有问题？
$sth = mysql_query("SELECT * FROM real_price");
$data = array (
'cols' => array(
array('id' => 'period', 'label' => 'Period', 'type' => 'string
浏览 0提问于2014-09-08得票数 0
我正在使用charts_flutter创建折线图，但我很难更改图表的颜色。背景色遵循主题背景色，我想改成白色背景。 ?
浏览 84提问于2021-06-26得票数 1
回答已采纳
我正在使用下面的代码来使用google charts生成折线图
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addC
浏览 5提问于2019-10-21得票数 1
回答已采纳
0回答
折线图的Google脚本。
、、、、
我想要创建折线图(仪表板)使用谷歌脚本的数据，看起来像这样- 。我想用供应商(A列)的类别过滤器绘制节省价格(D列)与订购的总重量(E列)的折线图。
我试着编辑在线提供的代码(如下所示)，但我收到了几个错误。例如- ReferenceError:没有定义"data“。(第9行，文件"Code")。如果有人能帮我摆脱这些错误，那将是非常有帮助的。
PS:我没有任何编程知识，所以我发布了这个问题，这似乎有点主观。
function doGet() {
var uiApp = UiApp.createApplication();
var ssKe
浏览 2提问于2016-12-30得票数 0
我正在通过查询输入到Google工作表中的数据来创建折线图，并且我需要添加数据标签，即图表上各点旁边的小数字。我找到了大量的文档，关于如何使用从手动输入的数据表中绘制的图表来实现这一点，而不是从Google工作表的查询中。请帮帮忙。
google.charts.load('current', {'packages':['corechart', 'line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var query = new
浏览 1提问于2020-05-30得票数 1
1回答
当折线图中只有一个点时，我只能看到x轴和y轴。
但是我想看到一条从(0,0)到这一点的线。
我有过
charts.push(
dc.lineChart(compositeBrushchart).dimension(dim)
.colors(config.charts[x].color)
.group((add_origin(grp)),config.charts[x].group)
.interpolate(config.interpolate)
.renderDataPoints(config.renderdatapoints)
.rend
浏览 8提问于2020-02-27得票数 0
回答已采纳
正在尝试从每个详细信息记录的4个单独字段中的数据创建垂直折线图。
我知道如何使用Excel (见下图)，试图弄清楚如何使用Crystal Charts。此外，数据是按详细记录计算的，我发现我只能在页眉或页脚部分插入图表。
我也不确定我使用的措辞是否正确，因为我似乎无法通过谷歌搜索找到答案。
谢谢!
浏览 1提问于2019-05-07得票数 0
目前，我正在使用Google Charts和Google Web Toolkit，但我想探索其他的图表选项。我研究了jGraph和gwt扩展mxgraph，但它们似乎只支持流程图/图表的实际图形？
有没有其他的库(除了Google图表)可以用来直观地显示折线图/饼图？
谢谢
浏览 4提问于2013-04-09得票数 2
回答已采纳
1回答
如何使用漂亮的iOS Charts使折线图虚线？它是在Android charts版本的this way中完成的，但这种方法在iOS上不起作用。
浏览 35提问于2020-12-30得票数 1
这是创建折线图的代码。我正在尝试在线条注解的顶部添加一个图像。这里有一个关于的演示。代码如下：
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number'
浏览 0提问于2017-02-01得票数 2
我已经在ESP8266上创建了一个web服务器，它使用Google gauge显示当前温度数据，使用折线图显示以前的数据。仪表和折线图将随着新数据的传入而更新。一切运行正常，当我调用IP时，折线图将显示并开始填充。问题是，线形图的每个IP调用开始时都没有数据，然后重新填充，因为当dataTable初始化时，它会返回一个新的空数据表。在进行IP调用时，有没有人可以建议从datatable中的现有数据数组创建折线图？谢谢。
更新折线图的代码：
<!DOCTYPE html>
<html>
<head>
<script type="tex
浏览 0提问于2020-11-28得票数 0
2回答
我正在使用，这是Google的vue插件。
我试着让新的材料设计看起来像图表。我试着把"google.charts.Bar“传递给海图型道具，它确实奏效了。但是，许多选项被忽略了，因为正如中所述，options对象需要使用google.charts.Bar.convertOptions(options)进行转换，这是插件没有做到的。
从源代码来看，插件安装了一个“vue-图表”组件。这个组件使用ChartWrapper来处理图表库的加载，如下所示：
methods: {
buildWrapper (chartType, dataTable, options, container
浏览 3提问于2017-03-30得票数 7
回答已采纳
我有一个google组合图，上面显示了柱状图和线形图。非常简单。google charts网站上的示例。
日金额(柱状图/条形图)当前金额(折线图)
我想要做的是在当前的每日金额栏后面添加预期金额栏。让其他一切都保持不变。因此，一个人一眼就能看出他们离预期的数量有多近。我如何在谷歌图表中做到这一点。我只想将一个条形图叠加在另一个条形图上，基本上每天都在预期之上，但找不到任何关于这方面的信息。感谢你的帮助，这是个新手。
浏览 0提问于2015-05-24得票数 2
在代码中，我试图在图表下面添加一个超链接。当我点击它的时候，它会带我去一个新的标签，上面有download.Any帮助的谷歌图表图像？
我看了很多例子，其中大部分都是
google.visualization.events.addListener(chart, 'ready',function() {
console.log(chart.getChart().getImageURI());
document.getElementById('png').innerHTML = '<a href="' +
chart.getChar
浏览 0提问于2017-04-25得票数 0
回答已采纳
我正在尝试添加一个谷歌登录按钮到我的Vue.js应用程序，我找到了vue-谷歌-OAuth2插件。我安装了它，并严格按照sample.html代码将其集成到我的应用程序中，以这种方式：
<template>
<div>
<h1>Test</h1>
<button @click="handleClickSignIn" :disabled="!isLoaded">signIn</button>
</div>
</template>
<scr
浏览 0提问于2018-10-20得票数 0
我用width=100%创建了谷歌图表：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart)
浏览 0提问于2019-07-02得票数 4
回答已采纳
1回答
考虑一下google图表中的starter multiple折线图： google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addC
浏览 31提问于2021-01-07得票数 1
回答已采纳
3回答
谷歌图表-标注Y轴
、、、
我正在尝试用谷歌图表制作一个简单的折线图。
我想为Y轴添加一个$符号和一个Y轴标题，这些只是表面上的更改，而不是对轴的比例的更改。
我使用drawChart()函数来实现这一点。我对JavaScript不是很熟悉，网上有相当多的文档，考虑到您可以使用Google Charts的许多方法，这些文档有点让人困惑。
我需要在下面的代码中添加什么才能获得Y轴值。
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type=&
浏览 0提问于2013-09-02得票数 0
我正在Rails 5应用程序页面上显示谷歌图表饼图。
图表仅在我单击刷新时显示，而不是在初始页面加载时显示。
似乎我不是第一个有这个问题的人，但我尝试过的解决方案都没有成功--比如设置超时。
任何指导都将不胜感激。
/layout/application.html.erb
<head>
...
<%= yield :google_chart_scripts %>
...
</head>
/视图/组织/show.html.erb
<% content_for :google_chart_scripts do %>
<script type=&
浏览 4提问于2017-04-05得票数 0
1回答
我一定要在我的一个项目中使用谷歌图表。我需要的是，显示一个条形图，在条形图中，一条与每个条形图相交的线代表另一个值。如果你看下面的jsfiddle，你会注意到折线图只与中间的柱状图相交，并继续向前移动到其他柱状图。
例如，如果你看一下“苹果”，我会让这条线在y=2.5处(从开始到结束)与整个条形相交，并在条形内结束，而不是逗留在空白区域，也不会到达其他条形。
有没有人能帮我(只用谷歌图表)
我试着在每个数据行之后注入空值，这样至少可以删除空格中的行。然而，现在只有一个点在酒吧的中心。寻找一种将其扩展到整个条宽的方法。
google.charts.load('current'
浏览 0提问于2019-07-16得票数 0
2回答
我试着在火狐上使用谷歌图表，问题是谷歌应用程序接口在火狐ReferenceError: google is not defined上不能成功加载
下面是我的代码：
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
浏览 3提问于2016-10-23得票数 3
1回答
可以在google折线图中添加货币符号吗？
这是我的代码。
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month',
浏览 0提问于2020-12-11得票数 0
我已经创建了一个静态google折线图：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(d
浏览 0提问于2019-11-19得票数 0
我目前有一个类似下面的表格，我正在尝试创建一个折线图，其中x轴是'Date'，y轴是'# of API Calls‘，有三条线，每一条线对应于'Category’中的每个唯一值。我已经大量阅读了Google Charts API文档，但似乎就是找不到正确的函数组合来实现这一点。任何帮助都是非常感谢的。
浏览 0提问于2012-09-15得票数 2
我正在使用Google Charts尝试创建一个折线图，它看起来像第一个标记为Example的折线图：
但是，我不能使用第一个示例中所示的google.visualization.arrayToDataTable()。
问题是我想给每个绘制点添加注释和annotationText。文档中说我必须使用：
google.visualization.DataTable()
为了做到这一点，我必须执行以下操作：
var data1 = [
[ 'C' ,4, 'o', 'note'],
[ 'D'
浏览 2提问于2013-12-22得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
