我使用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 回答
虽然这不是正确的方法,但我找到了解决这个问题的方法 . 我自己用以下方法来解决这个问题:
1)我做了一个div并在highchart的工具提示部分,我指示它在该div上显示列名 . 2)点击后,我从该div获取名称,并在点击时获得整个钻取数据 .
3)现在我在click上调用另一个函数,并将列的名称和所有向下钻取对象发送到该函数 .
4)之后,我在钻取中找到该名称并在表格中显示平均值 .
您可以在此链接上查看完整的解决方案 . jsfiddle.net/me_ankit/sp0t5bkr/