0

我在 Angular JS 应用程序中为我的图表使用 Chartist JS。问题是我在这里看到了这个。有一个JS bin突出了这个问题。对此作者给出了解决方案。解决方案是在 Jquery 中进行 DOM 操作，这很容易做到。然而，使用 AngularJS，您操作 DOM 的方式是通过指令。我在这里创建了一个 plunker，它突出了 Angular JS 中的相同问题，但我对如何将作者提供的解决方案放入我的 Angular 代码感到困惑。这是解决方案

$('[data-tab]').on('toggled', function (event, tab) {
    tab.find('.ct-chart').each(function(i, e) {
      e.__chartist__.update();
    });
});

编辑：根据要求更新 JSFiddle，所以我想做的是。我有三个不同的选项卡和三个不同的图表，每当我点击它们时，我应该看到各自的图表。为了使选项卡行为成为可能，我使用范围和模型编写了一个基本代码。这有助于更改选项卡。问题是图表是为第一个或默认选项卡创建的，而不是为第二个和第三个选项卡创建的。作者给出了一个解决方案，但我不知道如何在 AngualrJS 中实现它

4

2 回答 2

1

您发布的 jQuery 解决方案基本上是查找所有图表引用，然后进行 DOM 操作并调用该update()函数。

关键是如何在 Angular 中找到要更新的图表。
在这种情况下，您可以在创建图表时分配一个变量。例如：

var chart4 = new Chartist.Bar('#chart4', data1);
var chart5 = new Chartist.Bar('#chart5', data2);

现在您有了图表的参考。您所要做的就是调用update()函数再次渲染图表。

if (value === "allDrivers") {
  $scope.tab = "All";
  chart4.update();
}

这是工作的小插曲

我想指出的一件事是：现在您需要双击选项卡以查看正在呈现的图表或调整浏览器窗口的大小。我仍在努力寻找解决此问题的方法。但至少这种方法让您了解如何将 jQuery 解决方案转换为 Angular 解决方案。

于 2016-03-10T14:58:51.873 回答
0

我能够使用 angular.element() 方法解决这个问题。因此，如果您希望在 Angular 代码中使用 jquery。你必须通过 angular.element 方法来做到这一点。但请确保在 index.html 中包含 angular 之前的 jquery

如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，则 angular.element 委托给 Angular 的内置 jQuery 子集，称为“jQuery lite”或 jqLit​​e。

我不知道这个。从这里它为我学习。根据这篇文章中@pieterjandesmedt 的建议。我能够做到这一点。对于其他想要了解其工作原理的人。我创建了一个 GitHub存储库，它为这个问题提供了解决方案。问题的链接在问题中给出。希望有帮助

于 2016-03-11T10:15:44.660 回答