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

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

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

android - How to create dynamically Fragment pager adapter -