问题标签 [vue-chartjs]

我想给我的图表一个渐变背景颜色，但我无法访问画布上下文，因为我的图表在我编写的包装器组件中呈现。

我想要达到的目标：

我的实际包装器看起来像这样：

我将包装器用于不同的折线图，并让它的父级传递相关数据 - 有时每页多次使用包装器组件。

所有配置（选项、标签等）都在使用包装器的父组件中完成。

有没有办法将画布上下文从包装器获取到使用包装器的父组件？

要创建渐变，您需要这样的东西：

..butthis.$refs.canvas在父组件中未定义，这使我无法获取上下文，因此我无法创建渐变。

我使用 vue-chartjs 绘制一些图表，如折线、条形等。

在我的项目中，在图表中使用特定值或数据标签的情况很多。使用 vue-chartjs 的工具提示选项，我可以在悬停时检查数据项的值或标签。

我想知道单击（未悬停）时如何访问或获取与图形上的点匹配的特定数据的信息。这是我关于图表选项的代码。

就我而言，我使用“onclick”选项来访问点触发“click”事件的特定数据。在“onClick”回调中，我检查了所有图表元素和数据集等。

触发点击事件时，如何在图形点（如线）或图形条（如条）上获取标签特定数据项的值？

我是一名学习vue的学生。我使用 Vue-chartjs 绘制了一个图表，我想在饼图上显示该值。但我不知道该怎么办。

请帮我...

当前情况（图像）：在此处输入图像描述

我的愿望（图片）：在此处输入图片描述

我正在尝试对这个项目使用类似的方法，其中labels和datasets在子组件中定义，并绑定到父组件中的道具，但我没有得到任何结果。

“Vue.js devtools”插件显示 props 包含在父组件中传递的数据，但是初始控制台日志显示空数组：

因此，由于“如果您更改数据集，Chart.js 不会提供实时更新”这一事实，我尝试了reactiveProp mixin，它引发了以下错误，很可能是因为我只更新了一个数据集：

观察者“chartData”的回调错误：“TypeError：newData.datasets 未定义”

问题：

1. 如果最初绑定的数组为空并且我没有看到任何相关的 mixin 或watcher ，那么来自 GitHub 的这个项目中的图表如何更新？

2. 在这种情况下如何使用vue-chartjsmixins 来提供实时更新？我想将所有选项和配置保留在图表组件中，只更新标签和数据集。

组件/LineChart.vue

应用程序.vue

下面是我的 vue 文件的副本，其中包含警告中提到的观察者：

我看不出代码有什么问题，也不知道为什么会导致循环。任何帮助，将不胜感激。我通过道具传递chartData。如果您还需要什么，请告诉我。

为了让事情变得更容易，下面是我传递道具chartData的方式：

每次有人从下拉列表中选择某些内容时，此数据都会更新。下拉菜单中的代码如下：

有人第一次选择某样东西时，效果很好。但是，第二个选择会创建一个循环，我不知道为什么。

我正在使用Vue-Chartjs lib，并且正在尝试制作折线图。好吧，我已经用下面的代码完成了它，它有效！图表已绘制。但是，当我更改我内部的任何变量的值时Vue Data（如示例中的此test输入）。它在控制台中评估此错误。我认为这是因为 VueChartJS，因为如果我删除图表，一切正常。

TypeError：将循环结构转换为 JSON

line.js

仪表板.vue

我究竟做错了什么？

谢谢！！=)

我已经chartData使用 vuex 映射到状态属性。我想做的是在更新数据集时更新图表。mixinchartData根据文档自动设置了一个观察者，但我不确定如何将它与 vuex 一起使用。

LineChart.js：

市场图表.vue：

存储数据路径是chartData.datasets[i].data.

图表最初正确渲染，我知道数据在状态中正确更新（更新状态后，如果我在开发中触发热重新加载，它会使用更新的数据重新渲染图表）但图表没有更新。如何将 mixin 与映射的状态变量一起使用或以其他方式触发状态更改的更新？

首先，我想说这个问题并不是一成不变的，因为我非常愿意尝试其他建议，因为我可能完全错过了一个合适的方法。

我在 JSX 中使用 Vue-ChartJs，但希望在应用程序开始时不必扩展我需要的每个图表组件，例如：

相反，我想动态扩展组件，也许，一个 prop 将确定要扩展的内容：

这个方法目前不起作用，因为在 extends: 它返回一个错误 t is undefined which "this" 没有被设置。

对可能的解决方案有什么建议吗？提前致谢。

使用 vue-chartjs 是否可以更改条形的颜色？

这类似于这个问题，它基于 chart.js chart.js bar chart color change based on value，答案中提供的 jsfiddle 正是我正在寻找的，除了在 vue-chartjs 中。

任何帮助表示赞赏

我正在使用 API，将结果保存在数据中，然后v-for用于在表格中列出该数据。其中一列包含一个 vuechart，但我似乎无法让它显示任何内容。如果我检查创建的组件，它在 props 数组中有数据，但在获取条形时没有骰子。

将 vuechart 图表放入v-for循环有什么特别之处吗？还是我没有正确传递一些东西？

这是代码：

趋势图.js

结果.vue

如果我在渲染组件后检查组件，我会看到道具在那里，但数据似乎并没有进入图表，或者我假设，我从未见过成功的（这是输出文本格式的 Vue 开发工具）：