问题标签 [vue-chartjs]

我正在尝试用 vue-chartjs 制作一个 vue。当 chartData 道具更新时，我已遵循所有有关重新渲染图表的相关文档。我的图表只会在我调整浏览器窗口大小后更新。

我的 parenttestchart.vue 文件：

我的 TestChart.vue 文件

因此，这是在选择和更改父 vue 中的数据集合方面起作用的。除非我调整窗口大小，但图表不会重新呈现。当 parenttestchart.vue 最初加载时，我收到以下错误：'Uncaught TypeError: Cannot read property 'transition' of null'。但这似乎没有任何影响，因为调整窗口大小将呈现图表的初始显示。更新数据 changetestthing 方法确实会正确更新数据集合（chartData），但除非我调整窗口大小，否则它不会重新渲染。

如何强制图表重新渲染？我怎样才能在父级中获得对 TestChart 组件的引用？this.TestChart 未定义。我只是想从参考中获取参考，以防我可以手动调用'renderChart'。谢谢。

*** 更新

我能够通过以下修改来更新图表：

我从 changetestthing 方法中删除了以下几行：

并将 datacollection 赋值语句更改为：

我不能肯定地说这是最佳实践。根据 vue.js 文档（https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats）

所以我相信通过不将 datacollection.labels 和 .datasets 属性设置为 null 然后使用 Object.assign 触发更改。我仍然不确定为什么没有使用 mixins 或手动手表触发它们。任何意见表示赞赏。

我正在尝试为vue-chartjs使用反应式数据混合

用于设置初始数据的挂载函数正在运行，我可以使用 API 响应正确查看图表：

数据：

我正在显示带有文本字段的图表以提供反应部分 - 期望它再次调用端点并接收新响应

然而，为了测试反应部分，现在我只是直接更改数据数组以查看它是如何工作的：

对，所以这给了我错误

LineChart.js 如文档中所述，此处缩写为空格

所以，图表最初工作正常，但我似乎无法让反应部分工作。

我正在使用vueand的最新版本vue-chart.js。

我想自定义悬停点时显示的工具提示。

问题

工具提示未从默认更改

问题

如何自定义工具提示。最终，我希望能够单击工具提示中的链接以触发一个对话框，该对话框将显示从我的 vue 组件中包含的数据中获取的详细信息。

https://codepen.io/anon/pen/ooyMMG

我有一个 LineChart 组件，代码如下：

我想在另一个组件中使用这个组件，因为我可以影响组件 Chart.vue 的数据data和options值。

我是 VueJS 新手，无法理解 vue-chartjs 文档中的示例。

这是我的组件，它将成为父组件，以及我从现在开始所做的事情：

我正在使用 vue-chartjs 但每次我调整它的大小时，它的布局都不再正确了。它超越了屏幕。此外，当我调整它的大小时，图表丢失了，但它会在一段时间后出现，但有时它只是变白。顺便说一句，我将 Bulma 用于我的响应式框架。

它应该看起来像这张照片。

这是我的代码之一

我是 Vue.js 的新手，我的第一次尝试是使用 ChartJS（vue-chartjs 包）制作一个简单的折线图。

我使用“HelloWorld.vue”作为基础材料，并创建了 LineChart.js

问题是在 HelloWorld 中，我的变量名为datacollection，这个名称被传递到我的 LineChart.js 中。我该如何解决，所以我不会将变量名作为对象

我得到：

我想：

因此，在我的 LineChart.js 中，我需要执行 .datacollection。这将使我的 LineChart.js 的可重用性降低，因为我始终必须记住将所有变量命名为 LineChart 'datacollection'。

LineChart.js：

我的 Graph.vue 页面：

我的依赖（版本）

我想念什么？

我正在尝试使图表对状态更改做出反应，我在 sidenav 上有一些过滤器和一个包含如下 chart.js 组件的组件：

效果很好，但是我想在过滤器更改时重新加载此图表，我该怎么做？

我使用 vue-chartjs 创建了一个图表，它从 JSON 端点呈现一些数据。

问题是页面重新加载后图表未呈现。
这是调用图表组件的HTML 。

这是呈现图表数据的缺席Chart.js文件。

最后是我的.vue文件。

更新：图表在我调整浏览器页面大小后出现。

在我的部落项目中，Supercell 游戏中的《战争之王》。我正在尝试使用 chart.js 为当前的捐款制作图表。我将 Vue 用于前端，将 vue-chartjs 用于图表。只有1个问题。当我打开页面时，数据集不可见。那么我该如何解决呢？

这是图表数据对象：

这是 DonationChart 组件：

PS：当我点击图例时，数据显示正常

我有一个带有两个vue-tabs 的组件，每个组件都有两个实例vue-chart-js。尽管它们在没有错误的情况下被初始化，但当我尝试通过document.querySelector('#mySecondChart').toDataURL(). 只有当我单击该选项卡并使其处于活动状态时，此图表才会转换为图像。默认活动选项卡中的图表会正确转换为图像。这是代码：

当我单击按钮而不转到第二个选项卡时，我的方法输出第一个图表的 DOMString，而第二个图表不输出任何内容。只有当我首先访问第二个选项卡，然后单击按钮时，我的方法才会返回两个字符串化图表。有什么方法可以强制渲染第二个图表而不激活包含它的选项卡？