问题标签 [vue-chartjs]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
271 浏览

javascript - 如何在回调中停止无限递归

我一直在试图理解为什么以及如何修复legendCallbackVue 的 Vue 图表中发生的这种无限递归,但无济于事。非常感谢您的帮助。

在我的 Vue 组件中,选项在方法中定义为:

我的 generateLegendData 方法如下所示:

如果没有 for 循环,即只返回预期的字符串,它就可以正常工作。

0 投票
1 回答
1236 浏览

vue.js - VueJS - vue-charts.js

我正在尝试将从 API 获取的数据作为道具传递给 vue-chartjs,我正在按照文档中的方式进行操作,但它不起作用。

主要成分

作为回应,我有一个对象数组,每个对象看起来像这样:

然后我想以某种方式将数据发送到图表,所以我将月份推送到chartdata.labels和。total_pricechartdata.datasets[0].data

图表组件

console.log(this.chartdata)从我的主要组件输出我的图表数据对象,并且数据在那里,因此数据被正确传递给图表,但图表上没有呈现任何内容。

文档是这样说的:

我发现这个文档有点含糊,因为它没有解释我需要chartdata作为道具传递给图表的内容。你能帮助我吗?

0 投票
1 回答
301 浏览

javascript - 在chartjs笛卡尔时间轴上的某些时间位置创建刻度

我创建了一个实时图表,通过添加一个新值并删除一个旧值,大约每 10 秒更新一次。

实时图表的图像

我对时间轴的选定刻度有点不满意。每 10 分钟一次很好,但我更喜欢像15:50, 16:00, 16:10. 我查看了文档时间轴,但没有发现任何有希望的东西。我对我的xAxes样子的定义是:

我试图遍历数据集并找到“第一个漂亮时间”对象并将该对象设置为我的ticks.min对象。但这没有用。

0 投票
1 回答
2909 浏览

javascript - vue-chartjs中的水平滚动

我有一个关于 vue-chartjs 的问题。我需要在 jsfiddle 中实现这样的结果:http: //jsfiddle.net/mbhavfwm/
这是我的 vuejs 组件代码(图表数据由参数发送)。

我想代表一天中不同活动中用户的步行速度。因此,所有活动都可能分布在一天中的所有时间。我附上了一张图片,该图片显示了 2 个不同的活动作为示例。我想要实现的是在一天中的不同时刻绘制它们,所以我需要使用水平滚动。

我尝试使用“缩放”插件,但我不太喜欢它。我将不胜感激任何帮助或建议。在此处输入图像描述

0 投票
2 回答
291 浏览

laravel - (Laravel) 如何从 API 控制器中提取数据,以便在 vue-chartjs 中显示

我如何$mortality从 API/ReportController.php 中提取数据,以便将其用作图表数据。

报告控制器.php

我阅读了https://vue-chartjs.org/guide/#chart-with-api-data但我不知道如何开始。您能用简单的方式向我解释一下,以便我理解吗?谢谢

0 投票
2 回答
5355 浏览

vue.js - Vue Chart.js - 条形图上的简单点/线

我需要在我的bar图表上添加一条简单的点/垂直线,它具有动态 X 值,0 表示 Y 值。我需要的预览(红点):

在此处输入图像描述

绿色值是动态的。

我当前状态的预览:

在此处输入图像描述

其中 3.30应该是点的 X 坐标 - [3.30, 0]。

我正在为图表使用Vue 图表,我尝试使用 and 创建一个混合图表barscatter但它scatter需要type: 'linear'xAxis不适合我对bar图表的需求。

所以我尝试使用chartjs-plugin-annotation,它是box接受“坐标”的类型,但这里的问题是该X必须是X轴labels对象)上的固定值。如果我输入 X 轴 [3,0] 它将起作用,但如果有一个十进制数,例如 [3.5, 0],它将不起作用。



所以,我的问题是如何在Chart.js条形图上放置一个“简单”点或垂直线,其中该点具有 X 轴的动态值 -> [动态值,0]。

仅供参考 - 这是关于预期价值

0 投票
3 回答
1673 浏览

vue.js - vue-chartjs 无法显示标签和数据集

我的line-chart. 来自 api/controller 的数据无法在我的图表上传输,但作为响应显示了我的所有数据

在此处输入图像描述

如图所示, 里面line-chart是空的,但是response里面有一个数据。

我有一个错误是说

TypeError:无法读取 app.js:86744 处未定义的属性“地图”

我不知道如何解决它请帮助我。谢谢


代码

报告.Vue

报告MortalityLineChart.js

应用程序.js

在此处输入图像描述

预习

报告控制器.php

死亡率表

0 投票
2 回答
2325 浏览

charts - 图表js:根据数据生成动态标签

我正在动态获取图表..这是chart当前月份的,范围为 1-31 在此处输入图像描述

我想有一个range filter例子: 2012/01/1 to 2014/01/1 我该怎么做这labels会太多?可以说我决定这样做,yearly但是如果用户想从中看到year jannov应该每月进行一次,那我怎么知道呢?如果是每月还是每年,或者最好的方法是什么?

0 投票
1 回答
161 浏览

javascript - Vue-chart.js :获取部分数据;图表显示不好

我想在我的Dashboard.vue. x-axis和上的数据Y-axis来自我的 vuex 商店。当我检查浏览器上的 Vue 插件时,我可以看到来自商店的数据正在被访问。这是我的LineChart.js文件版本(图表的逻辑所在的位置)。

我的图表显示如下(图片): 图表显示

正如你在图片上看到的,我有两个红点;这些是针对前两组数据的:[18 January and 63.5]&[21 january and 23.9]所以我只得到了五分之二(目前数据对的总数)。谢谢您的帮助!

0 投票
1 回答
36 浏览

twitter-bootstrap - 如何将单选按钮绑定到组件应用程序?

我正在使用单选按钮来选择月份和年份。但我不确定如何绑定按钮的选择以显示我想显示的图表。

//模板

//