this.EixoX = ["Jun/2016","Jul/2016","Ago/2016","Set/2016","Out/2016","Nov/2016","Dez/2016"];
\t this.EixoY = "Reais";
\t this.Class = "DivGraficoLinhaDoTempo";
\t this.Titulo = "Média de Vendas por Equipe";
\t this.Subtitulo;
\t this.ValoresBarras =[{
\t \t \t \t name:"ECLEIA",
\t \t \t \t data: [30000, 32000, 54000, 50000, 54000, 50000], //JAN, FEV, MAR, ABR, MAY, JUN
\t \t \t \t vendedores: [{name:"ECLEIAv1",data:[32000,40005,40005,27002,20002,70001]},{name:"ECLEIAv2",data:[30000,55000,45000,22000,32000,33001]}]
\t \t \t \t },{
\t \t \t \t name:"JOANA",
\t \t \t \t data: [43000, 12000, 34000, 4000, 30004, 4000],
\t \t \t \t vendedores: [{name:"JOANAv1",data:[72000,55005,70005,90002,70002,50001]},{name:"JOANAv2",data:[22000,50005,40005,40002,30002,66001]}]
\t \t \t \t },{
\t \t \t \t name:"GABRIELE",
\t \t \t \t data: [22000, 22000, 34000, 20004, 30004, 4000],
\t \t \t \t vendedores: [{name:"GABRIELEv1",data:[11000,30005,60005,40002,30002,30001],vendedores: [{name:"GABRIELEv1SUB1",data:[11000,30005,60005,40002,30002,30001]},{name:"GABRIELEv1SUB2",data:[60000,50005,40005,24502,55502,70001]}]},{name:"GABRIELEv2",data:[60000,50005,40005,24502,55502,70001]}]
\t \t \t \t },{
\t \t \t \t name:"FRANCISCO",
\t \t \t \t data: [54000, 12000, 30004, 4000, 30004, 4000],
\t \t \t \t vendedores: [{name:"FRANCISCOv1",data:[52000,60005,20005,11002,66002,40001]},{name:"FRANCISCOv2",data:[50000,56005,40005,25002,30002,38001]}]
\t \t \t \t }];
\t this.ValoresLinha = [{
\t \t \t \t name:"MÉDIA",
\t \t \t \t data: [54000, 12000, 30004, 4000, 30004, 4000]
\t \t \t
\t \t \t \t }];
\t //ATRIBUTOS AUXILIARES
\t this.nivel;
\t this.indexmes;
\t this.indexvendedor;
\t this.drilldownniveis;
\t var drilldownTitle = "Equipe de ";
\t ///UserCodeRegionStart:[User Functions] (do not remove this comment.)
\t var _this = this;
\t //var vetorNomesX \t = [];
var colors = Highcharts.getOptions().colors;
\t \t $(function() {
\t \t \t Highcharts.Tick.prototype.drillable = function() {}; //REMOVE LINKS DOS LABELS DO EIXO X(mes), pois cada mes possui "n" vendedores
\t \t \t var options = {
\t \t \t \t type:"column",
\t \t \t \t chart: {
\t \t \t \t \t renderTo: "container",
\t \t \t \t \t events: {
\t \t \t \t \t \t \t drilldown: function(e) {
\t \t \t \t \t \t \t \t //console.log(e.point);
\t \t \t \t \t \t \t \t \t chart.setTitle({ text: drilldownTitle + e.point.name });
\t \t \t \t \t \t \t },
\t \t \t \t \t \t \t drillup: function(e) {
\t \t \t \t \t \t \t \t \t chart.setTitle({ text: _this.Titulo });
\t \t \t \t \t \t \t }
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t title: {
\t \t \t \t \t text: _this.Titulo
\t \t \t \t },
\t \t \t \t subtitle: {
\t \t \t \t \t text: _this.Subtitulo
\t \t \t \t },
\t \t \t \t xAxis: {
\t \t \t \t \t categories: _this.EixoX
\t \t \t \t },
\t \t \t \t yAxis: {
\t \t \t \t \t labels: {
\t \t \t \t \t \t formatter: function() {
\t \t \t \t \t \t \t return Highcharts.numberFormat(this.value,0);
\t \t \t \t \t \t }
\t \t \t \t \t },
\t \t \t \t \t title: {
\t \t \t \t \t \t text: _this.EixoY
\t \t \t \t \t }
\t \t \t \t },
\t \t \t \t plotOptions: {
\t \t \t \t \t column: {
\t \t \t \t \t \t \t \t \t \t \t cursor: "pointer",
\t \t \t \t \t \t \t \t \t \t \t point: {
\t \t \t \t \t \t \t \t \t \t \t \t \t events: {
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t click: function (e) {
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.indexmes = e.point.x;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.indexvendedor = e.point.series.columnIndex;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t //LÓGICA PARA AVANÇO DE NIVEIS
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if(_this.drilldownniveis){
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t chart.setTitle({ text: drilldownTitle + _this.drilldownniveis[_this.indexvendedor].name });
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = _this.drilldownniveis[_this.indexvendedor].drilldown;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }else{
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t chart.setTitle({ text: drilldownTitle + options.series[_this.indexvendedor].name });
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = options.series[_this.indexvendedor].data[_this.indexmes].drilldown;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if(options.series[_this.indexvendedor].data[_this.indexmes].drilldown.length<=0){ //SE drilldown = 0 mesma coisa que não ter (undefined), então seto null!
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = null;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t //setChart de acordo com novas variaveis
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if (_this.drilldownniveis) { // drill down
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t if(_this.drilldownniveis.length<=0){
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis = options.series;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t var media = new Array(0,0,0,0,0,0,0); //ZERA ARRAY PARA PODER SOMAR VALORES
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t for(var x=0;x<_this.EixoX.length;x++){
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t $(_this.drilldownniveis).each(function(index, el) {
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t media[x] += el.data[x];
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t for(var x=0;x<_this.EixoX.length;x++){
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t media[x] = media[x]/_this.drilldownniveis.length;
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis.push({
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t "name": "MÉDIA",
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t "type":"spline",
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t "data": media
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t });
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t setChart(null, _this.EixoX, _this.drilldownniveis, null, 1);
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t _this.drilldownniveis.pop();
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t } else if(!_this.drilldownniveis){ // restore
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t chart.setTitle({ text: _this.Titulo });
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t setChart(null, _this.EixoX,options.series, null,2);
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }else if(options.series){ // NÃO VAI ENTRAR AQUI
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t setChart(null, _this.EixoX,options.series, null,2);
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t }
\t \t \t \t },
\t \t \t \t legend: {
\t \t \t \t \t layout: "horizontal",
\t \t \t \t \t align: "right",
\t \t \t \t \t verticalAlign: "bottom",
\t \t \t \t \t floating: false,
\t \t \t \t \t borderWidth: 0
\t \t \t \t },
\t \t \t \t credits: {
\t \t \t \t \t enabled: false
\t \t \t \t },
\t \t \t \t series: []
\t \t \t \t // drilldown: {
\t \t \t \t // \t series: drill_down_data
\t \t \t \t // }
\t \t \t };
\t \t \t function setChart(name, categories, series, color, tipo) {
\t \t \t \t if(series.length<=0){
\t \t \t \t }else{
\t \t \t chart.xAxis[0].setCategories(categories);
\t \t \t while (chart.series.length > 0) {
\t \t \t chart.series[0].remove(true);
\t \t \t }
\t \t \t \t \t \t \t \t \t \t for (var i = 0; i < series.length; i++) {
\t \t \t \t \t \t \t \t \t \t \t \t var tipocolumn="column";
\t \t \t \t \t \t \t \t \t \t \t \t var marcador=[];
\t \t \t \t \t \t \t \t \t \t \t \t if(i==series.length-1){
\t \t \t \t \t \t \t \t \t \t \t \t \t tipocolumn="spline";
\t \t \t \t \t \t \t \t \t \t \t \t \t marcador= {
\t \t \t \t \t \t \t \t \t \t \t \t \t \t lineWidth: 2,
\t \t \t \t \t \t \t \t \t \t \t \t \t \t symbol: "circle",
\t \t \t \t \t \t \t \t \t \t \t \t \t \t lineColor: Highcharts.getOptions().colors[3],
\t \t \t \t \t \t \t \t \t \t \t \t \t \t fillColor: "white"
\t \t \t \t \t \t \t \t \t \t \t \t \t };
\t \t \t \t \t \t \t \t \t \t \t \t }
\t \t \t \t \t \t \t \t \t \t // \t chart.setTitle({ text: _this.Titulo });
\t \t \t chart.addSeries({
\t \t \t \t \t \t \t \t \t \t \t \t \t \t type: tipocolumn,
\t \t \t \t \t \t \t \t \t \t \t \t \t \t marker: marcador,
\t \t \t name: series[i].name,
\t \t \t data: series[i].data,
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t drilldown: series[i].drilldown,
\t \t \t color: colors[i]
\t \t \t });
\t \t \t }
\t \t \t \t \t \t \t \t \t \t }
\t \t \t }
//INICIALIZAÇÃO DAS SERIES DO Highcharts
$(_this.ValoresBarras).each(function(index, el) {
\t var drilldownseries =[];
\t var series = {
\t \t name: el.name,
\t \t type: "column",
\t \t data: []
\t \t \t \t };
\t \t \t for(var count=0;count<_this.EixoX.length;count++){
\t \t \t \t series.data.push({
\t \t \t \t \t \t "name": el.name,
\t \t \t \t \t \t "y": el.data[count],
\t \t \t \t \t \t "colors": colors[index],
\t \t \t \t \t \t "drilldown": drilldownseries
\t \t \t \t });
\t \t \t }
\t \t \t \t $(el.vendedores).each(function(index2, vendedor) {
\t \t \t \t \t drilldownseries.push({
\t \t \t "name" : vendedor.name,
\t \t \t "data" : vendedor.data,
\t \t \t \t \t \t \t "drilldown": vendedor.vendedores
\t \t \t \t \t \t \t });
\t \t \t \t });
\t options.series.push(series);
});
$(_this.ValoresLinha).each(function(index, el) {
\t \t var series = {
\t \t \t type: "spline",
\t \t \t name: "",
\t \t \t data: [],
\t \t \t marker: {
\t \t \t \t lineWidth: 2,
\t \t \t \t lineColor: Highcharts.getOptions().colors[3],
\t \t \t \t fillColor: "white",
\t \t \t }
\t \t };
\t \t series.name = el.name;
\t \t series.data = el.data;
\t \t options.series.push(series);
\t });
\t \t \t var chart = new Highcharts.Chart(options);
\t \t \t /*$("#" + obj).highcharts({
\t \t \t });*/
\t \t });
\t ///UserCodeRegionEnd: (do not remove this comment.):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
Burada biraz örnek geliştirdim: http://jsfiddle.net/ed3ob9au/ –
Hayvanların 2 çocuğu varsa ve bu çocukların her biri 2 çocuğu varsa nasıl yaparım? – Julian
İstediğiniz kadar matkap ekleyebilirsin, örneğin: http://jsfiddle.net/ed3ob9au/107/ –