javascript - Highcharts Control Basic DrilDown Using Dom -
i have answer of previous question on how use dom drilldown , @ this post. found simple , easy understand version of highcharts.js @ here can see code more clear understand.
now can please let me know how enable buttons drilldown , in this demo?
$(function () { var chart; function drawchart1() { chart = new highcharts.chart({ chart: { renderto: 'container', type: 'column' }, title: { text: 'basic drilldown' }, subtitle: { text: 'source: worldclimate.com' }, xaxis: { type: 'category' }, legend: { enabled: false }, credits: { enabled: false }, yaxis: { title: { text: 'total percent market share' } }, plotoptions: { series: { borderwidth: 0, datalabels: { enabled: true } } }, series: [{ name: 'things', colorbypoint: true, data: [{ name: 'animals', y: 5, drilldown: 'animals' }, { name: 'fruits', y: 2, drilldown: 'fruits' }] }], drilldown: { series: [{ id: 'animals', data: [ ['cats', 4], ['dogs', 2], ['cows', 1], ['sheep', 2], ['pigs', 1] ] }, { id: 'fruits', data: [ ['apples', 4], ['oranges', 2] ] }] } }); $("#animals").on("click", function () { $(this).addclass('disabled'); $("#overview").removeclass('disabled'); }); $("#fruits").on("click", function () { $(this).addclass('disabled'); $("#overview").removeclass('disabled'); }); $("#overview").on("click", function () { $(this).addclass('disabled'); $("#animals").removeclass('disabled'); $("#fruits").removeclass('disabled'); }); } drawchart1(); });
well, not part of api, noticed, drill up, need call chart.drillup()
. drilldown, it's bit different , depends want drilldown.
in short call method: chart.xaxis[0].drilldowncategory(category_index);
, see: http://jsfiddle.net/vncnwd66/2/
however, there 1 limitation: can't drilldown second level of a, second level of b. first need drill up, drilldown second level.
Comments
Post a Comment