问题标签 [vue-chartjs]

我正在尝试将 Chart.js 与 Vue.js 一起使用，这就是我正在编译的内容，但我没有看到 GUI 上显示任何内容。

这是我的文件 DonutChart.vue：

这是父组件“Usage.vue”：

DonutChart.vue 和 Usage.vue 在同一个目录下：

我需要使用 ChartJS 库为我的圆环图创建自定义图例。我已经使用 ChartJS 提供的默认图例创建了甜甜圈，但我需要进行一些修改。

我想拥有高于汽车名称的价值。此外，我不喜欢粘性图例，我希望将其与甜甜圈分开，这样我就可以更改字体、框的样式（例如，在文本“Audi”旁边）

我知道有一些Legend 生成器，但我不确定如何将它与 VueJS 一起使用 - 因为我使用 VueJS 作为框架

这就是我的传奇现在的样子 - http://imgur.com/a/NPUoi

我的代码：

从我导入甜甜圈组件的 Vue 组件：

Javascript：

我正在使用 Chart.js 2.5.0 并想知道是否有人可以就以下功能要求给我一些指示。

我有一个气泡图，为了争论，它包含推文。

我在显示推文的图表旁边有一个列表视图。与此相关的是过滤功能，因此它只会显示具有用户输入的特定字符串值的推文。

我想做的是当用户使用过滤器时，它只显示与过滤结果相对应的气泡。我将pointIndexand传递datSetIndex到我的桌子上。但是，我真的很难弄清楚如何更新图表，以便隐藏与当前过滤器输出不匹配的气泡。

有什么建议么？

当我在父组件中更改道具时，道具不会更新

父组件：

我有controlData值作为子组件道具的默认值，control它是相等2的，当我第一次运行我的应用程序时我可以看到该值

在ready()我需要从后端加载数据并将该值设置为子组件道具control等于来自后端的数据。

但是可以说，现在我只想control在父组件准备好时更改（子值）。所以我在父组件中做了这个：

controlData然后我使用 v-bind 在更改时将该值发送给子级

子组件：

我的子组件中有这个

我还添加watch: {}了查找更改，props但我看不到更改

我正在尝试使用vue-chartjs npm 包，但我下面的代码没有呈现图表。我正在使用 VueJS 2，并且已经使用npm.

我收到此错误：

[Vue 警告]：挂载钩子错误：“TypeError：__WEBPACK_IMPORTED_MODULE_0_vue_chartjs__.Line.renderChart不是函数”

当我尝试使用 VueCharts 加载组件时，该组件加载了四次。我怎么解决这个问题？因为我需要在组件加载并且请求繁重时发出 ajax 请求

** 编辑 **

>

我在我的项目中使用vue-chartjs。我想要实现的是添加与原始chartjs相同的选项，但在我的情况下不起作用。就像我删除/隐藏图表标题并删除 y 轴等时一样。我相信这是 chartjs v2。请参阅下面的示例代码。

任何帮助将非常感激。

我使用vue-chartjs作为 chartjs 的包装器。我有一个带有随机数据的简单折线图，但坚持如何设置要在图表的 y 轴上显示的固定值。目前我有0-100的随机数据。现在，我想要实现的只是0, 50, 100在 y 轴上显示，无论随机值是从0-100.

示例脚本

任何帮助将非常感激。

我想通过反应性将数据从父级传递给 GrandChild（即图表），所以我正在使用道具。

这是家长

下面的“kalkulator-data”组件已工作，它用于将数据添加到Parent。

这是孩子

这就是图表的GrandChild

当我添加数据时，我使用计算来保持反应性，但它​​在控制台中说：

当我仍然没有添加数据时，它工作得很好（这就是为什么我在Parent中硬编码两个对象以在开始时测试我的图表），但是当我添加数据时它出现了错误。

换句话说，它适用于静态数据，但不适用于动态数据。

数据在计算属性中可用（见屏幕截图），但不会呈现到 PieChart 控件中。

有人知道为什么吗？

代码 ：

VUE 信息：（Chrome 调试）