Question

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

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

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

Answer 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();
}

以下是working plunker

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

Answer 2

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

如果jQuery可用，angular.element是jQuery的别名功能。如果jQuery不可用，则angular.element委托给 Angular的内置jQuery子集，名为＆＃34; jQuery lite＆＃34;或jqLite。

我不知道这个。从这里开始学习。遵循来自this帖子的@pieterjandesmedt的建议。我能够做到这一点。对于想要了解其工作原理的其他人。我创建了一个GitHub repo来解决这个问题。问题的链接在问题中给出。希望有所帮助

ChartistJS：将jQuery解决方案转换为AngularJS

2 个答案: