javascript - 如何在点击 tc-angular-chartjs 时放大

Question

我想知道是否有办法在单击图表的一部分后进行缩放。我的意思是...我有一张包含一个月中所有天数的图表。我想单击第 4 天，它必须放大并在同一张图表上显示第 4 天之前的 3 天和之后的 3 天。它必须在点击时放大。其他日子也必须做同样的事情。有没有办法做到这一点？谢谢!

我注意到的另一件事是，如果您在 Canvas 不显示的情况下重新加载页面，即使您从样式中切换不显示，图表也不会显示。它仅显示图例。所以我必须重新加载页面才能看到图表，并且无法在重新加载页面上隐藏它。我必须仅在单击某个按钮时显示它。

您能给我一些有关这些事情的信息吗？再次感谢。

Answer 1

将图表=“图表”添加到 Canvas 。

然后，您可以将 Chart.js 对象分配给变量并使用 getSegmentsAtEvent(event) 和/或 getPointsAtEvent(event) 函数。

在你的 Controller 中你可以获取点事件

angular.module( 'app', ['tc.chartjs']);angular.module( 'app' ).controller( 'AppController', function( $scope ) {    $scope.chart;    $scope.chartClick = function( event ) {        if ( $scope.chart ) {            // Different methods depending on chart type            console.log( $scope.chart.getPointsAtEvent( event ) ); // for Points            console.log( $scope.chart.getSegmentsAtEvent( event ) ); // for Segments        }    };    ...

您可以加载事件引用的新图表数据。