我正在尝试使用HighCharts在每个级别上使用不同的图表 .
例如 -
-
Level-1包含条形图 .
-
Level-2包含饼图 .
-
Level-3包含表格表示 .
以下是我的代码片段:
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie' // Mentioned only pie.Need different graph on individual level.
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 1,
dataLabels: {
enabled: true,
}
}
},
series: [{
id: 'toplevel',
name: 'Animals',
data: [
{name: 'Cats', y: 4, drilldown: 'level1'}, //Level-1
{name: 'Dogs', y: 2},
{name: 'Cows', y: 1},
{name: 'Sheep',y: 2},
{name: 'Pigs', y: 1}
]
}],
drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
data: [
{name: 'Trees', y: 1},
{name: 'Plants', y: 2},
{name: 'Grass', y: 3},
{name: 'Deeper Level-2', y: 4, drilldown: 'level2'} //Level-2
]
},{
id:'level2',
name: 'Level 2',
data: [
{name: 'Green', y:1},
{name: 'Red', y:2},
{name: 'Blue', y:3},
{name: 'Deeper Level-3', y: 4, drilldown: 'level3'} //Level-3
]
},{
id: 'level3',
name: 'Level 3',
data: [
{name:'Violet', y:1},
{name:'Red',y:2},
{name:'Yellow', y:3}
]
}]
}
})
我期待这一点,同时点击每个级别;数据将在每个级别上以不同的图表出现 .
上面的代码在切片点击上给出了相同图表类型的数据,这应该是不同的图表类型 .
2 回答
要更改每个单独的级别图表类型,您应该使用
series.type
,如下所示:既然你想在最后一级钻取到表,而highcharts不支持这样的东西你应该创建一个自定义钻取到表:
level-2
点添加点击事件处理程序,调用createTable
方法并将level-3数据传递给createTable
:Working Fiddle of what I have done
希望有所帮助
您只需要设置数据系列的类型 . 看jsfiddle