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


as can see basic example, http://www.highcharts.com/demo/pie-basic when select pie, selected pie got pulled out animation. , handled option.

pie: {      allowpointselect: true } 

however, don't want mouse click select point. have, say, button outside of pie chart, when press button, first pie/point should selected.

i have following

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

programatically set first point selected when button clicked. works fine, lost animation (where should pull outward).

my questions are:

  1. how can add animation back?
  2. series[0].data contains few data points, need reset data[i].sliced false each of them after button clicked. there easy way instead of loop through items?

.controller('spendingpiechartctrl', ['$scope', '$q', 'transactionservice', 'categoryservice','chartcolors', function ($scope, $q, transactionsvc, categorysvc, chartcolors) { if(typeof $scope.height === 'undefined') { $scope.height = 140; } $scope.sawchartconfig = { options: { chart: { plotbackgroundcolor: null, plotborderwidth: null, plotshadow: false, type: 'pie', margin: [0, 0, 0, 0], spacingtop: 0, spacingbottom: 0, spacingleft: 0, spacingright: 0, height: $scope.height }, plotoptions: { pie: { datalabels: { enabled: false }, size: '100%', borderwidth: 0 }, series: { states: { hover: { enabled: false } } } }, title:{ text: null }, tooltip: { enabled: false } }, series: [{ data: [] }] };

$q.all([     transactionsvc.get(),     categorysvc.get() ]).then(function() {     var spendingcategories = transactionsvc.gettopcategories();     //redraw chart 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; }); 

i using ng-hightcharts, , here directive call

chart.series[0].data[index].select() select/deselect of slices without loosing animation.

see working example here

by using above code second problem fixed, since next select call automatically deselect other selected slices in chart.


Comments

Popular posts from this blog

html - Outlook 2010 Anchor (url/address/link) -

javascript - Why does running this loop 9 times take 100x longer than running it 8 times? -

Getting gateway time-out Rails app with Nginx + Puma running on Digital Ocean -