高图表-当饼状图切片时丢失的动画以编程方式设置

high charts - lost animation when pie chart sliced is programmatically set

本文关键字：动画 编程 设置 方式 切片 高图表      更新时间：2023-09-26

从这个基本示例中可以看到，http://www.highcharts.com/demo/pie-basic当你选择一个饼时，所选的饼会被动画缓慢地拉出。这是由这个选项处理的。

pie: {
     allowPointSelect: true
}

然而，我不希望鼠标点击选择点。例如，我在饼状图的外面有一个按钮，当我按下按钮时，第一个饼/点应该被选中。

我有以下

$scope.SAWChartConfig.series[0].data[0].selected = true;
$scope.SAWChartConfig.series[0].data[0].sliced = true;

程序设置第一个点被选中时，按钮单击。它工作得很好，但是它失去了动画(它应该慢慢向外拉)。

我的问题是:

  1. 我如何添加动画回来?
  2. 系列[0]。数据包含几个数据点，我需要重置数据[I]。在按钮被点击后，它们中的每一个都被切片为false。是否有一种简单的方法来代替循环遍历所有项目?

。控制器('spendingPieChartCtrl'， ['$scope'， '$q'，TransactionService, CategoryService, chartColors, function($scope， $q, TransactionSvc, CategorySvc, chartColors) {如果(typeof美元范围。高度=== '未定义'){美元的范围。高度= 140;}美元的范围。SAWChartConfig = {选择:{图:{plotBackgroundColor:空,plotBorderWidth:空,plotShadow:假的,类型:"派",边距:[0,0,0,0]，spacingTop: 0,spacingBottom: 0,spacingLeft: 0,spacingRight: 0,高度:$ scope.height}，plotOptions: {派:{dataLabels: {启用:假}，大小:"100%",borderWidth: 0}，系列:{状态:{徘徊:{启用:假}}}}，标题:{文字:零}，提示:{启用:假}}，系列:[{数据:[]})

};
$q.all([
    TransactionSvc.get(),
    CategorySvc.get()
]).then(function() {
    var spendingCategories = TransactionSvc.getTopCategories();
    //redraw the chart by updating series data
    $scope.SAWChartConfig.series = [{data: spendingCategories}];
});
$scope.$on('talkToOne', function( event, data ){
    $scope.SAWChartConfig.series[0].data[index].select();
    //$scope.SAWChartConfig.series[0].data[index].sliced = true;
});

我正在使用ng-hightcharts，这里是指令调用

chart.series[0].data[index].select()将在不丢失动画的情况下对切片进行选择/取消选择。

查看这里的工作示例

通过使用上面的代码，您的第二个问题也将得到解决，因为下一个select调用将自动取消选择图表中其他选定的切片。

相关文章：