在高图表的堆映射上单击事件显示数据

Question

此图像包含有关特定用户上传的项目数量的详细信息

我正在使用堆图高图表来显示用户的项目详细信息。

on Y-axis => represents week of the days which ranges from 0 to 6
eg. Mon = 0, Tue= 1,....Sun=6
on X-axis => represents months, which ranges from 0 to 11
eg. Jan = 0, Feb = 1, ... Dec = 11

数据格式

 X   Y  Data
[0  ,1  , 3]

假设，用户在 1 月份的星期一上传了 3 个项目。当我在堆图上单击该 3 时，它应该显示一个弹出框，

which should include project name,date and time
eg. Project Name : image recognition
    Date : Uploaded on Jan 4,2019
    Time : 10:04:00

在此，我对数据进行了硬编码。https://jsfiddle.net/k9hyfjmL/

此代码从 mysql 数据库中检索数据并填充在堆映射上，这表示用户上传的项目数。

$(document).on('click', '.click_once', function()
       {
            $.ajax(
                {
                url: '/profile/heap_map_data',
                type: 'GET',
                success: function(response) 
                {
                        var chart_data = [];
                        var skip_1st_data = 1;
                        var take_Data_upto = 0;
                        for (var i = 0, len = response.length; i < len; i++)
                        {   if(skip_1st_data == 1)
                        {
                                skip_1st_data = 2;
                        }
                        else{
                                take_Data_upto = take_Data_upto + 1;
                                chart_data.push(response[i]);
                                if(take_Data_upto == 31)
                                {
                                        break;
                                }
                        }
                        }
                        console.log(chart_data)
                        Highcharts.chart('heap_map_chart', 
                        {
                                chart: 
                                {
                                        type: 'heatmap',
                                        marginTop: 40,
                                        marginBottom: 80,
                                        plotBorderWidth: 1,
                                },

                                title: 
                                {
                                        text: 'Project Details'
                                },
                                xAxis: 
                                {
                                        categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
                                },
                                yAxis: 
                                {
                                        categories: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun'],
                                        title: null
                                },

                                colorAxis: 
                                {
                                        min: 0,
                                        minColor: '#FFFFFF',
                                        maxColor: Highcharts.getOptions().colors[0]
                                },
                                legend: 
                                {
                                        align: 'right',
                                        layout: 'vertical',
                                        margin: 0,
                                        verticalAlign: 'top',
                                        y: 25,
                                        symbolHeight: 280
                                },
                                tooltip: 
                                {
                                        formatter: function () 
                                        {
                                                return  + this.point.value + ' <b> project was uploaded on ' + this.series.xAxis.categories[this.point.x] + ' date, 2019' + '<br /> click to view more' ;
                                        }
                                },
                                series: [
                                {
                                        borderWidth: 1,
                                        data: chart_data,
                                        dataLabels: 
                                        {
                                                enabled: true,
                                                color: '#000000'
                                        }
                                }]
                        }); 

                },
                error : function(jqXHR, textStatus, errorThrown)
                {
                        console.log('jqXHR:');
                        console.log(jqXHR);
                        console.log('textStatus:');
                        console.log(textStatus);
                        console.log('errorThrown:');
                        console.log(errorThrown);
                        alert(errorThrown);
                } 
                });
        });

Answer 1

您可以使用

point.events.click函数在另一个HTML元素中显示更多信息：

series: [{
    point: {
        events: {
            click: function() {
                document.getElementById('moreInfo').innerText =
                    'value: ' + this.value;
            }
        }
    },
    ...
}]

---

现场演示：https://jsfiddle.net/BlackLabel/p261zg9d/

API 参考：https://api.highcharts.com/highcharts/series.heatmap.point.events.click