Highchart xAxis点击获取drilldown.id问题

时间:2016-02-15 13:31:50

标签: jquery graph highcharts

我正在尝试使xAxis标签可点击与plotOptions可点击相同。

我有两个图表,两个都是可点击的

如果添加以下内容:

<script type="text/javascript">

var chartC;

draw_main_chart();

function draw_main_chart()
{
   Highcharts.setOptions({ colors:['#8BC3E8'] });

   var colors = '#8BC3E8',
      categories = [ 'Specialteam & Winback', 'Inbound Salg & Service 2', 'SP Nord', 'Inbound Nysalg', 'SP Sjælland', 'Outbound Nysalg', 'Inbound Gruppe & Nordea', 'Inbound Salg & Service 1', 'SP Syd', 'Outbound Mail & Chat', 'Service & Holdback', 'RoS', 'Outbound Mersalg', 'Outbound Nordea', 'Strategisk Salgsstyring', 'Outbound Auto', 'Onboarding', 'Partner', ],      name = 'Tryg',
      level = 0,
      data = [ { y:14.50,color: '#8BC3E8',drilldown:{ id:57, name:'Specialteam & Winback',color: '#8BC3E8' } }, { y:11.24,color: '#8BC3E8',drilldown:{ id:62, name:'Inbound Salg & Service 2',color: '#8BC3E8' } }, { y:8.15,color: '#8BC3E8',drilldown:{ id:56, name:'SP Nord',color: '#8BC3E8' } }, { y:8.03,color: '#8BC3E8',drilldown:{ id:59, name:'Inbound Nysalg',color: '#8BC3E8' } }, { y:7.56,color: '#8BC3E8',drilldown:{ id:54, name:'SP Sjælland',color: '#8BC3E8' } }, { y:6.49,color: '#8BC3E8',drilldown:{ id:63, name:'Outbound Nysalg',color: '#8BC3E8' } }, { y:6.43,color: '#8BC3E8',drilldown:{ id:60, name:'Inbound Gruppe & Nordea',color: '#8BC3E8' } }, { y:6.36,color: '#8BC3E8',drilldown:{ id:61, name:'Inbound Salg & Service 1',color: '#8BC3E8' } }, { y:6.16,color: '#8BC3E8',drilldown:{ id:55, name:'SP Syd',color: '#8BC3E8' } }, { y:6.14,color: '#8BC3E8',drilldown:{ id:67, name:'Outbound Mail & Chat',color: '#8BC3E8' } }, { y:5.58,color: '#8BC3E8',drilldown:{ id:58, name:'Service & Holdback',color: '#8BC3E8' } }, { y:4.28,color: '#8BC3E8',drilldown:{ id:86, name:'RoS',color: '#8BC3E8' } }, { y:3.69,color: '#8BC3E8',drilldown:{ id:64, name:'Outbound Mersalg',color: '#8BC3E8' } }, { y:2.76,color: '#8BC3E8',drilldown:{ id:66, name:'Outbound Nordea',color: '#8BC3E8' } }, { y:1.81,color: '#8BC3E8',drilldown:{ id:68, name:'Strategisk Salgsstyring',color: '#8BC3E8' } }, { y:0.82,color: '#8BC3E8',drilldown:{ id:65, name:'Outbound Auto',color: '#8BC3E8' } }, { y:0,color: '#8BC3E8',drilldown:{ id:88, name:'Onboarding',color: '#8BC3E8' } }, { y:0,color: '#8BC3E8',drilldown:{ id:89, name:'Partner',color: '#8BC3E8' } }, ];

  chartC = new Highcharts.Chart({
      chart: {
         renderTo: 'DepartmentStat', 
         type: 'column',
         events: {

        }
      },
      title: {
         text: 'TOTAL STATISTICS OF TRYG',
         style: {
                fontSize: '15px',
                fontWeight: 'bold',                
                color: '#000000'
            },
            align: 'center'
      },   
      subtitle: {
         text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks department (%)</div><br><br><div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each department to view details</div>',
         style: {
                fontWeight: 'bold'
            }
      },
      xAxis: {
         categories: categories,
         style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
      },
      yAxis: {
         title: {
            text: 'Total percent %',
                style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
         }
      },
      credits: {
        enabled: false
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function(e)
                  {
                      var drilldown = this.drilldown;

                      if (drilldown)
                      {
                          window.location.href = 'userlogs/departments/' + drilldown.id;
                      }
                  },
                  mouseOver: function() {                                    
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#33c570');
                  },
                  mouseOut: function() {                       
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
                  }
               }
            },
            dataLabels: {
               enabled: true,
                crop: false,
                overflow: 'none',
               formatter: function() {
                  return this.y;
               }
            }             
         }
      },
      tooltip: {
         enabled: false
      },
      series: [{
         name: name,
         level: level,
         data: data,
         showInLegend: false
      }],
      exporting: {
         enabled: true
      }
   });

    draw_product_chart();

$.each(chartC.xAxis[0].ticks, function(i, tick) {
  $('.highcharts-xaxis-labels text').on('click', function () {
    var drilldown = chartC.series[0].data[i].drilldown;
    if (drilldown) { // drill down
        //window.location.href = 'userlogs/departments/' + drilldown.id;
        alert(drilldown.id);

    } 
  });

    $('.highcharts-drilldown-axis-label').hover(function () {
        $(this).css('fill', '#33c570');
    },
    function () {
        $(this).css('fill', 'black');
    });
});


}

var chartP;



function draw_product_chart()
{
   Highcharts.setOptions({ colors:['#8BC3E8'] });

   var colors = '#8BC3E8',
      categories = [ 'Bil', 'Hus', 'Indbo', 'Ulykke', 'Rejse - Verden', 'Hund', 'Børneforsikring', ];      name = 'Tryg',
      level = 0,
      data = [ { y:55.33,color: '#8BC3E8',drilldown:{ id:23, name:'Bil',color: '#8BC3E8' } }, { y:20.35,color: '#8BC3E8',drilldown:{ id:22, name:'Hus',color: '#8BC3E8' } }, { y:9.90,color: '#8BC3E8',drilldown:{ id:15, name:'Indbo',color: '#8BC3E8' } }, { y:9.23,color: '#8BC3E8',drilldown:{ id:25, name:'Ulykke',color: '#8BC3E8' } }, { y:3.03,color: '#8BC3E8',drilldown:{ id:36, name:'Rejse - Verden',color: '#8BC3E8' } }, { y:1.73,color: '#8BC3E8',drilldown:{ id:24, name:'Hund',color: '#8BC3E8' } }, { y:0.43,color: '#8BC3E8',drilldown:{ id:43, name:'Børneforsikring',color: '#8BC3E8' } }, ];

  chartP = new Highcharts.Chart({
      chart: {
         renderTo: 'ProductStat', 
         type: 'column',
         events: {

        }
      },
      title: {
         text: 'TOTAL STATISTICS OF TRYG',
         style: {
                fontSize: '15px',
                fontWeight: 'bold',                
                color: '#000000'
            },
            align: 'center'
      },   
      subtitle: {
         text: '<div style="font-size: 14px; color:#000000;">Total amount of clicks divided into products (%)</div><br><br> <div style="font-size: 10px; color:#000000;">22-12-2015 to 15-02-2016</div><br><br><div style="font-size: 10px; color:#33c570;">Click each product to view details</div>',
         style: {
                fontWeight: 'bold'
            }
      },
      xAxis: {
         categories: categories
      },
      yAxis: {
         title: {
            text: 'Total percent %',
                style: {
                    fontWeight: 'bold',
                    fontSize: '11px',                    
                    color: '#000000'
                }
         }
      },
      credits: {
        enabled: false
      },
      plotOptions: {
         column: {
            cursor: 'pointer',
            point: {
               events: {
                  click: function(e)
                  {
                      var drilldown = this.drilldown;

                      if (drilldown)
                      {
                          window.location.href = 'userlogs/products/' + drilldown.id;
                      }
                  },
                  mouseOver: function() {                                    
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', '#33c570');
                  },
                  mouseOut: function() {                       
                    $(this.series.chart.xAxis[0].labelGroup.element.childNodes[this.x]).css('fill', 'black');
                  }
               }
            },
            dataLabels: {
               enabled: true,
                crop: false,
                overflow: 'none',
               formatter: function() {
                  return this.y;
               }
            }             
         }
      },
      tooltip: {
         enabled: false
      },
      series: [{
         name: name,
         level: level,
         data: data,
         showInLegend: false
      }],
      exporting: {
         enabled: true
      }
   });


    $.each(chartP.xAxis[0].ticks, function(i, tick) {
      tick.label.on('click', function() {
        var drilldown = chartP.series[0].data[i].drilldown;
        if (drilldown) { // drill down
            //window.location.href = 'userlogs/products/' + drilldown.id;
            alert(drilldown.id);
        } 
      });

        $('.highcharts-drilldown-axis-label').hover(function () {
            $(this).css('fill', '#33c570');
        },
        function () {
            $(this).css('fill', 'black');
        });
    });
}

</script> 

在图表上,一个图表有效,另一个图表不起作用。

都有var chatCvar chartP

我做错了什么?一张图表另一张图表没有。

如果我同时点击图表,则其中一个图表不起作用。 我知道问题在这里:

$.each(chartC.xAxis[0].ticks, function(i, tick) {
  $('.highcharts-xaxis-labels text').on('click', function () {
    var drilldown = chartC.series[0].data[i].drilldown;
    if (drilldown) { // drill down
        //window.location.href = 'userlogs/departments/' + drilldown.id;
        alert(drilldown.id);

    } 
  });

    $('.highcharts-drilldown-axis-label').hover(function () {
        $(this).css('fill', '#33c570');
    },
    function () {
        $(this).css('fill', 'black');
    });
});

0 个答案:

没有答案