Highcharts与负面堆栈栏：如何显示左右不同的工具提示

Question

我正在使用负面堆栈的highcharts栏，问题是当我将鼠标悬停在红色的图表左侧时，显示正确的疾病名称这是“TB可疑”，但是当我将鼠标悬停在蓝条就显示了同样的“TB可疑病”这是错误的，它应该显示“中耳炎” 同样的问题对于所有其他疾病

这里是代码

<script> 
$(function() { 
    if($('#disease-bar').length > 0){ 
    // Age categories 
    var categories_c = [<?=$comm_disease_title?$comm_disease_title:0;?>]; 
    var categories_nc = [<?=$non_comm_disease_title?$non_comm_disease_title:0;?>]; 
    $(document).ready(function() { 
     $('#disease-bar').highcharts({ 
      colors: ['#dd4c39', '#00a9e9', '#c61a7e', '#bd8030', '#949293', '#075290', '#7db6ed', '#009451', '#c84433'], 
      chart: { 
       type: 'bar', 
       backgroundColor: null 
      }, 
      title: { 
       text: 'Top Five Communicable & Non-communicable Diseases' 
      }, 

      xAxis: [{ 
       categories: categories_c, 
       reversed: false, 
       crosshair: true, 
       labels: { 
        step: 1 
       } 
      }, { // mirror axis on right side 
       opposite: true, 
       reversed: false, 
       categories: categories_nc, 
       linkedTo: 0, 
       labels: { 
        step: 1 
       } 
      }], 
      yAxis: { 
       title: { 
        text: null 
       }, 
       labels: { 
       formatter: function() { 
        var s = Math.abs(this.value); 

        if (s.toFixed(0) >= 1000000) { 
         return s.toFixed(0)/1000000 + 'M'; 
        } else { 
         return s.toFixed(0)/1000 + 'K'; 
        } 

       } 
      } 
      }, 

      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        stacking: 'normal', 
        //point: { 
        events: { 
         click: function() { 
          //alert(this.name);return; 
          if(this.name=="Communicable"){ 
           var url = 'disease.php<?=$next_url;?>&module=1'; 
           } 
          else { 
           var url = 'disease.php<?=$next_url;?>&module=2'; 
           } 
           //alert(url); 
          location.href = url; 
         } 
         ,legendItemClick: function (event) { 
          //console.log(event.target.visible); 
          if(event.target.name=='Communicable'){ 
           if(event.target.visible){this.chart.xAxis[0].update({ 
          labels: { 
          enabled: false 
          } 
         });} 
           else {this.chart.xAxis[0].update({ 
          labels: { 
          enabled: true 
          } 
         });} 


         } 


          else { 
           if(event.target.visible){this.chart.xAxis[1].update({ 
          labels: { 
          enabled: false 
          } 
         });} 
           else {this.chart.xAxis[1].update({ 
          labels: { 
          enabled: true 
          } 
         });} 


         } 
          //console.log(event.target.name); 
         //console.log(this.chart.xAxis[0]); 


        } 

        } 
       // } 
       } 
      }, 

      tooltip: {{ 

       formatter: function() { 
        return '<b>' + this.point.category + '</b><br/>' + 
         'Diseases: <b>' + Math.abs(this.point.y) +'</b>'; 
       } 
      }, 

exporting: { 
      //enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
      series: [{ 
       name: 'Communicable', 
       data: [<?=$comm_disease_value?$comm_disease_value:0;?>] 
      }, { 
       name: 'Non-communicable', 
       data: [<?=$non_comm_disease_value?$non_comm_disease_value:0;?>] 
      }] 
     }); 
    }); 
    } 
}); 
</script> 

这里是我使用

tooltip: {{ 

       formatter: function() { 
        return '<b>' + this.point.category + '</b><br/>' + 
         'Diseases: <b>' + Math.abs(this.point.y) +'</b>'; 
       } 
      }, 

JS小提琴工具提示的代码：https://jsfiddle.net/hamza9/h1nrn9nu/

Answer 1

我能得到从格式正确的类别：

formatter: function() { 
    var subCategoryLabel = this.series.chart.xAxis[this.series._i] 
           .categories[this.point.index]; 
    return '<b>' + subCategoryLabel + '</b><br/>' + 
      'Diseases: <b>' + Math.abs(this.point.y) + '</b>'; 
} 

Answer 2

您必须修改序列数据作为对象，其中dd是各自的类别名和y的阵列是值

：

series: [{ 
    name: 'Communicable', 
    data: [{y:-1489599,dd:'Acute (Upper) Respiratory Infections'}, {y:-256548,dd:'Scabies'}, {y:-157531,dd:'Diarrhoea/Dysentery < 5 yrs'}, {y:-148696,dd:'Diarrhoea/Dysentery > 5 yrs'}, {y:-86283,dd:'Worm Infestations'}] 
     //url: 'disease.php?frequency=m&year=2017&month=1&quarter=&fatype=&disease_cat=comm' 
    }, { 
    name: 'Non-communicable', 
    data: [{y:399786,dd:'Fever due to other causes'}, {y:247500,dd:'Peptic Ulcer Diseases'}, {y:196653,dd:'Hypertension'}, {y:176866,dd:'Dental Caries'}, {y:169514,dd:'Diabetes Mellitus'}] 
     //url: 'disease.php?frequency=m&year=2017&month=1&quarter=&fatype=&disease_cat=noncomm' 
    }] 

在你的提示，您可以通过传递的“点”的对象属性访问

tooltip: { 
    formatter: function() { 
     return '<b>' + this.point.dd + '</b><br/>' + 
     'Diseases: <b>' + Math.abs(this.point.y) + '</b>'; 
    } 
    }, 

Fiddle演示

Answer 3

简单地摆脱linkedTo财产从第二X轴和连杆“非传染性”系列1 xAxis。

API参考：
http://api.highcharts.com/highcharts/series%3Cbar%3E.xAxis

例子：
https://jsfiddle.net/yqe0kunn/