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

Question

我在 Angular JS 应用程序中使用 Chartist JS 制作图表。问题是我看到 this here. There is a JS bin that highlights the issue. The author gives a solution for it. The solution is doing DOM manipulations in Jquery which is easy to do. However with AngularJS the way you manipulate the DOM is via Directives. I have created a 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

您 post 的 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

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

Answer 2

我能够使用 angular.element() 方法解决这个问题。因此，如果您希望在 angular 代码中使用 jquery。您必须通过 angular.element 方法执行此操作。但请确保在 index.html

中的 angular 之前包含 jquery

If jQuery is available, angular.element is an alias for the jQuery function. If jQuery is not available, angular.element delegates to Angular's built-in subset of jQuery, called "jQuery lite" or jqLite.

我不知道这个。从这里开始为我学习。遵循来自 this post. I was able to do this. For other people who want to learn how this works. I have created a GitHub repo 的@pieterjandesmedt 的建议，该建议提供了此问题的解决方案。问题中给出了问题的 link 。希望有帮助

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

ChartistJS : Converting jQuery solution to AngularJS

angularjs

angularjs-directive

chartist.js