Tooptip pointFormatters - HighCharts

时间:2018-04-19 21:21:22

标签: javascript highcharts

您好我正在使用API​​中的值创建饼图,我正在为每个值创建工具提示。工具提示中显示的值来自另一个API。如何在此工具提示中访问其他API值?

这是我的代码。

$scope.topUsersList = [
  {
    "ID": "1",
    "Display_Name": "Arun",
    "Module": "JRD",
    "Module_Hits": "25",
    "Total_Hits_by_User": "28"
  },
  {
    "ID": "1",
    "Display_Name": "Arun",
    "Module": "JRM",
    "Module_Hits": "3",
    "Total_Hits_by_User": "28"
  },
  {
    "ID": "2",
    "Display_Name": "Manohar",
    "Module": "JRD",
    "Module_Hits": "4",
    "Total_Hits_by_User": "9"
  },
  {
    "ID": "2",
    "Display_Name": "Manohar",
    "Module": "JRH",
    "Module_Hits": "3",
    "Total_Hits_by_User": "9"
  },
  {
    "ID": "2",
    "Display_Name": "Manohar",
    "Module": "JRM",
    "Module_Hits": "2",
    "Total_Hits_by_User": "9"
  },
  {
    "ID": "3",
    "Display_Name": "abcd",
    "Module": "JRM",
    "Module_Hits": "3",
    "Total_Hits_by_User": "3"
  },
  {
    "ID": "4",
    "Display_Name": "ghij",
    "Module": "JRM",
    "Module_Hits": "1",
    "Total_Hits_by_User": "1"
  }
];

这是要映射的实际数据。

$scope.topUsers = [
  {
    "id": "1",
    "display_name": "Arun",
    "percentage_of_total": "68.29"
  },
  {
    "id": "2",
    "display_name": "Manohar",
    "percentage_of_total": "21.95"
  },
  {
    "id": "3",
    "display_name": "abcd",
    "percentage_of_total": "7.32"
  },
  {
    "id": "4",
    "display_name": "ghij",
    "percentage_of_total": "2.44"
  }
]

这是我的代码。

$scope.getTopUsers = function() {
    axios.get('/getTopUsersList')
        .then(function (res) {
            $scope.topUsersList = res.data.rows;
            console.log($scope.topUsersList);
        });
    axios.get('/getTopUsers')
        .then(function(res) {
            $scope.topUsers = res.data.rows;
            console.log($scope.topUsers);
            Highcharts.chart('container-topUsersStats', {
                chart: {
                    type: 'pie',
                },
                title: {
                    text: 'Top 5 users Month-To-Date'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            enabled: true,
                            format: '{point.name}: {point.y:.2f} %'
                        }
                    }
                },
                tooltip: {
                    headerFormat: '<span style="font-size:11px"><b>{point.name}</b></span><br>',
                    pointFormat: '<span>Module Hits</span>: <b>{$scope.topUsersList}</b><br/>'
                },
                series: [
                    {
                        name: 'Top Users',
                        colorByPoint: true,
                        data: $scope.topUsers.map(function(user) {
                            return {
                                name: user.display_name,
                                y: parseFloat(user.percentage_of_total)
                            };
                        })
                    }
                ]
            });
        });
};

所以我想要做的是,当我将鼠标悬停在每个饼图上时,在工具提示中,我应该看到topUsersList中与该特定用户对应的数据。

感谢您的帮助。

0 个答案:

没有答案