首页 文章

Highchart多级钻取点击事件获取钻取系列数据

提问于
浏览
-1

我使用Highchart将数据显示为具有向下钻取功能的柱形图 . 我希望通过单击列以表格格式显示该列的相应深入分析数据 .

当我点击一列时,它会向我返回null值 .

如何通过单击列显示相应的向下钻取数据?

我正在使用多级向下钻取高图来将数据显示为柱形图 .

您可以通过单击给定链接查看完整代码:

http://jsfiddle.net/me_ankit/sp0t5bkr/

jQuery(function () {
// Create the chart
var chart = Highcharts.chart('container', {
    credits: {
        enabled: false
    },
    exporting: { enabled: true },
    chart: {
        type: 'column',
        renderTo: 'sampleChart',
    },
    credit:{enabled:false},
    title: {
        text: 'Reviews'
    },
    lang: {
        drillUpText: '◁ Back'
    },
    subtitle: {
        text: 'Details of reviews'
    },
    xAxis: {
        type: 'category',
        labels:{
            formatter: function() {
                return (this.value.toString()).replace(/[^\da-zA-Z]/g,' ');
            },
            showInLegend: true,
        },
        title: {
            text: 'Date of Reviews'
        }
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Number of Reviews'
        }
    },
    legend: {
        // layout: 'vertical',
        // backgroundColor: '#FFFFFF',
        enabled: true,
        floating: false,
        shadow :false,
        // align: 'left',
        // verticalAlign: 'top',
        // x: 90,
        // y: 45,
        labelFormatter: function () {
            return (this.name).replace(/[^a-zA-Z0-9]/g,' ');
        }
    },
    plotOptions: {
        series: {               
            borderWidth: 2,
            cursor: 'pointer',
            groupPadding: 0.125,
            dataLabels: {
                enabled: true,
                format: '{point.y}'
            },
            point: {
                events: {
                    click: function (e) {
                       console.log(this)
                    }
                }
            }
        },
    },
    tooltip: {
        useHtml:true,
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        //pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total
', formatter: function() { if(this.point.text) return '<b>'+this.point.text+'</b>'; return '<b>'+ this.point.name+'</b>'; } }, series: [{ name: 'Years', colorByPoint: true, data:[{"name":"Audio-2016","y":64,"drilldown":"audio_2016"},{"name":"Text-2016","y":8,"drilldown":"text_2016"},{"name":"Video-2016","y":10,"drilldown":"video_2016"}] }], drilldown: { series: [{"name":"AUDIO_2016","id":"audio_2016","data":[{"name":"October-2016","y":54,"drilldown":"october_audio_2016"},{"name":"November-2016","y":10,"drilldown":"november_audio_2016"}]},{"name":"TEXT_2016","id":"text_2016","data":[{"name":"October-2016","y":7,"drilldown":"october_text_2016"},{"name":"November-2016","y":1,"drilldown":"november_text_2016"}]},{"name":"VIDEO_2016","id":"video_2016","data":[{"name":"October-2016","y":8,"drilldown":"october_video_2016"},{"name":"November-2016","y":2,"drilldown":"november_video_2016"}]},{"name":"OCTOBER_AUDIO_2016","id":"october_audio_2016","data":[{"name":"week-4","y":50,"drilldown":"week_4_october_audio_2016"},{"name":"week-1","y":4,"drilldown":"week_1_october_audio_2016"}]},{"name":"NOVEMBER_AUDIO_2016","id":"november_audio_2016","data":[{"name":"week-1","y":10,"drilldown":"week_1_november_audio_2016"}]},{"name":"OCTOBER_TEXT_2016","id":"october_text_2016","data":[{"name":"week-4","y":7,"drilldown":"week_4_october_text_2016"}]},{"name":"NOVEMBER_TEXT_2016","id":"november_text_2016","data":[{"name":"week-1","y":1,"drilldown":"week_1_november_text_2016"}]},{"name":"OCTOBER_VIDEO_2016","id":"october_video_2016","data":[{"name":"week-4","y":8,"drilldown":"week_4_october_video_2016"}]},{"name":"NOVEMBER_VIDEO_2016","id":"november_video_2016","data":[{"name":"week-1","y":2,"drilldown":"week_1_november_video_2016"}]},{"name":"WEEK_4_OCTOBER_AUDIO_2016","id":"week_4_october_audio_2016","data":[{"name":"26-October-2016_Inactive","y":13,"color":"#D6CBC9","text":""},{"name":"26-October-2016_Active","y":29,"color":"#FFD700","text":"Winner of the week"},{"name":"27-October-2016_Active","y":8,"color":null,"text":""}]},{"name":"WEEK_1_OCTOBER_AUDIO_2016","id":"week_1_october_audio_2016","data":[{"name":"02-October-2016_Inactive","y":1,"color":"#D6CBC9","text":""},{"name":"02-October-2016_Active","y":3,"color":"#FFD700","text":"Winner of the week"}]},{"name":"WEEK_4_OCTOBER_TEXT_2016","id":"week_4_october_text_2016","data":[{"name":"26-October-2016_Active","y":7,"color":"#FFD700","text":""}]},{"name":"WEEK_4_OCTOBER_VIDEO_2016","id":"week_4_october_video_2016","data":[{"name":"27-October-2016_Active","y":8,"color":"#FFD700","text":""}]},{"name":"WEEK_1_NOVEMBER_AUDIO_2016","id":"week_1_november_audio_2016","data":[{"name":"01-November-2016_Active","y":6,"color":"#FFD700","text":""},{"name":"03-November-2016_Inactive","y":2,"color":"#D6CBC9","text":""},{"name":"03-November-2016_Active","y":2,"color":null,"text":""}]},{"name":"WEEK_1_NOVEMBER_TEXT_2016","id":"week_1_november_text_2016","data":[{"name":"03-November-2016_Active","y":1,"color":"#FFD700","text":""}]},{"name":"WEEK_1_NOVEMBER_VIDEO_2016","id":"week_1_november_video_2016","data":[{"name":"07-November-2016_Active","y":2,"color":"#FFD700","text":""}]}], } });

});

1 回答

  • 0

    虽然这不是正确的方法,但我找到了解决这个问题的方法 . 我自己用以下方法来解决这个问题:

    1)我做了一个div并在highchart的工具提示部分,我指示它在该div上显示列名 . 2)点击后,我从该div获取名称,并在点击时获得整个钻取数据 .

    3)现在我在click上调用另一个函数,并将列的名称和所有向下钻取对象发送到该函数 .

    4)之后,我在钻取中找到该名称并在表格中显示平均值 .

    您可以在此链接上查看完整的解决方案 . jsfiddle.net/me_ankit/sp0t5bkr/

相关问题