我正在尝试使用 HighCharts 在每个级别上制作不同的图表。
For example-
- 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}
]
}]
}
})
我期望,当点击每个级别时;数据将在每个级别上以不同的图表显示。
上面的代码在切片点击时为我提供了相同图表类型的数据,这应该是不同的图表类型。
最佳答案
要更改每个级别的图表类型,您应该像这样使用 series.type
:
drilldown: {
series: [ {
id:'level1',
name: 'Level 1',
type: 'bar',
//^^^^^^^^^^^
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',
type: 'pie',
//^^^^^^^^^^^^
...
}]
}
由于您想在最后一级钻取到表,而 highcharts 不支持这样的事情,您应该创建一个自定义钻取到表:
定义图表钻取到level-3时创建自定义表格的方法
var createTable = function(data) { $("#container").hide(); // remove the existing table $('#here_table .table').remove(); // create a table object var table = $('<div class="table"><a href="#" class="back" onclick="tableBack()">back</a><table></table></div>').addClass('chart-table'); // iterate the series object, create rows and columnts $.each(data, function( index, value ) { var row = $('<tr></tr>').addClass('chart-row'); var col1 = $('<td></td>').text(value.name).appendTo(row); var col2 = $('<td></td>').text(value.y).appendTo(row); // mark the row of the clicked sector table.append(row); }); }
为
level-2
点添加点点击事件处理程序,调用createTable
方法并将level-3数据传递给createTable
:{ id:'level2', name: 'Level 2', type: 'pie', point: { events: { click: function () { console.log(this); if(this.name == "Deeper Level-3"){ var data = [ {name:'Violet', y:1}, {name:'Red',y:2}, {name:'Yellow', y:3} ]; createTable(data); } } } }, data: [ {name: 'Green', y:1}, {name: 'Red', y:2}, {name: 'Blue', y:3}, {name: 'Deeper Level-3', y: 4} //Level-3 ] }
最后为 table back 添加一个事件处理程序以回到原来的位置:
tableBack = function(){ $("#container").show(); // remove the existing table $('#here_table .table').remove(); }
Working Fiddle of what I have done
希望对你有帮助
关于javascript - 如何在 highcharts 的每个级别上使用不同图表的 drilldown up to level 3?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38177625/