Question

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

pie: {
     allowPointSelect: true
}

但是，我不希望鼠标单击选择Point。我有一个饼图外面的按钮，当我按下按钮时，应该选择第一个饼/点。

我有以下

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

以编程方式将第一个点设置为单击按钮时的选定点。它工作正常，但它失去了动画（它应该慢慢向外拉）。

我的问题是：

我该如何添加动画？
series [0] .data包含一些数据点，我需要在单击按钮后将数据[i] .sliced重置为false。有没有一种简单的方法可以做到而不是遍历所有项目？

.controller（'spendPieChartCtrl'，['$ scope'，'$ q'， 'TransactionService'，'CategoryService'，'chartColors'，函数（$ scope，$ q，TransactionSvc，CategorySvc，chartColors）{ if（typeof $ scope.height ==='undefined'）{ $ scope.height = 140; } $ scope.SAWChartConfig = { 选项：{ 图表：{ plotBackgroundColor：null， plotBorderWidth：null， plotShadow：false，类型：'馅饼'，保证金：[0,0,0,0]， spacingTop：0， spacingBottom：0， spacingLeft：0， spacingRight：0，高度：$ scope.height }， plotOptions：{ 派：{ dataLabels：{ 启用：false }，尺寸：'100％'， borderWidth：0 }，系列：{ 状态： { 悬停：{ 启用：false } } } }，标题：{ text：null }，工具提示：{ 启用：false } }，系列：[{ 数据：[] }] };
$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，这是指令调用

Answer 1

chart.series[0].data[index].select()将选择/取消选择切片而不会丢失动画。

请参阅工作示例here

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

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

1 个答案: