与angularjs中的HighCharts相同的图表中的多个饼图

时间:2018-03-15 09:23:39

标签: javascript angularjs charts highcharts

我有两张饼图在同一张图表中显示, 我正在使用angularjs,两个饼图可以毫无问题地显示,

我对两个图表都有相同的图例,但在图表中显示了所有图例。 我在multiple-pie-charts-in-the-same-chart-with-highcharts中遵循了这个问题,但在我的案例中却没有。

这是我的代码:

 var total = $scope.widget.value;

            chartData = [];
            var serie2= [];
            var serie1= [];

            for (var key in $scope.summary['serie1']) {

                serie1.push([key, $scope.summary['serie1'][key]]);
            }
 for (var key in $scope.summary['serie2']) {

                serie2.push([key, $scope.summary['serie2'][key]]);
            }

            chartOptions = {

                series: [{
                    type: 'pie',
                    name: 'serie1,
                    center: [60, 50],
                    size: 60,

                    id: 'serie1',
                    allowPointSelect: true,
                    y: 50,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                       format: '<b>{point.y}</b>',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    },
                    showInLegend: true,
                    data: serie1
                },
                    {
                        type: 'pie',
                        name: 'serie2',
                        center: [220, 50],
                        size: 60,

                        dataLabels: {
                            enabled: true,
                           format: '<b>{point.y}</b>',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },

                        data: serie2
                    },
                ],
            }

我问是否有可能在plotOptions中添加此代码,

function(chart) {

    $(chart.series[0].data).each(function(i, e) {
        e.legendGroup.on('click', function(event) {
            var legendItem=e.name;

            event.stopPropagation();

            $(chart.series).each(function(j,f){
                   $(this.data).each(function(k,z){
                       if(z.name==legendItem)
                       {
                           if(z.visible)
                           {
                               z.setVisible(false);
                           }
                           else
                           {
                               z.setVisible(true);
                           }
                       }
                   });
            });

        });
    });
});

这是我的图表的结果

piechart

有人知道实现这个目标的方法吗?

提前谢谢你......

0 个答案:

没有答案