Highcharts angularjs Özel araç

Question

araç ipuçları üzerinde https://jsfiddle.net/neelkamal0666/6737c2q5/

Highcharts.chart('container', { 
     chart: { 
      type: 'column' 
     }, 
     colors: ["rgb(241,198,64)", "#0091ea"], 
     title: { 
      text: ' ', 
      useHTML : true 
     }, 
     xAxis: { 
      categories: ['Sowing', 'Activity', 'Application', 'Harvest'] 
     }, 
     yAxis: { 
      min: 0, 
      title :'', 
      stackLabels: { 
      enabled: false, 
      style: { 
       fontWeight: 'bold', 
       color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
      } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     tooltip: { 
      shared: false, 
      backgroundColor: 'black', 
      borderColor: 'black', 
      borderRadius: 10, 
      color: 'white', 
      useHTML :true, 
      borderWidth: 3, 
      headerFormat: '<b style="color: #fff;">{point.x}</b><br/>', 
      pointFormat: '<b style="color: #fff;">{series.name}: {point.y}</b><br/><b style="color: #fff;">Total(%): {point.stackTotal}</b><br />', 
      /*formatter: function() { 
      var s = '<b>' + this.x + '</b>'; 
      angular.forEach(this.points, function() { 
       s += '<br/>' + this.series.name + ': ' + 
       this.y + 'm'; 
      }); 

      return s; 
      } */ 
     }, 
     plotOptions: { 
      column: { 
      stacking: 'normal', 
      dataLabels: { 
       enabled: false, 
       color: 'white', 
       style: { 
       textShadow: '' 
       } 
      } 
      }, 
      series: { 
      pointWidth: 50, //width of the column bars irrespective of the chart size 
      additional : ["Sowing Area", "Activity", "Application", "Harvest"] 
      } 
     }, 
     series: [{ 
      name: 'Pending(%)', 
      data: [60, 40, 20, 80], 

     }, { 
      name: 'Completed(%)', 
      data: [40, 60, 80, 20], 

     }] 

     }); 

Ben mesela ekim tıkladığında o gösterecektir eğer farklı değerler görüntülemek istediğiniz

Pending : 60 
Total : 100 
Sowing Area : 4500 H 
Plots Audited : 1200 H 

Ve kullanıcı faaliyetleri tıkladığında, bu gösterecektir

Kullanıcı Uygulaması tıkladığında, kullanıcının Harvest tıkladığında, ben Highchart belgelerini okuyup örneklerin çok ile gittim

Pending :80, 
Completed :20 
Total :100, 
Volume Forcast : 100MT 

gösterecektir

Pending :20, 
Completed :80 
Total :100, 
Per acre usage : 200 

Ve gösterecektir

Pending : 40, 
    Completed : 60, 
    Total : 100, 
    Total Activities : 200 
    Closed Activities : 125 

ama yine de yapamaz bunu elde edebilirsiniz anlamaya.

Birisi yardımcı olabilir mi?

Answer 1

Araç ipucu görünümünü değiştirmek için veri noktası başına daha fazla bilgi ekleyebilir ve daha sonra ona erişebilir ve tooltip ürününün formatter numarasına ayarlayabilirsiniz.

Örnek: https://jsfiddle.net/woo70ers/

Başka dizideki tüm ekstra bilgi var daha kolay olabilir - bir içine daha kolay çok döngü, her ne ek.

Basit bir örnek: çok Kacper http://jsfiddle.net/am5ynoLg/

tooltip: { 
     formatter: function() { 
     var ret = 'x: ' + this.x + ', y: ' + this.y; 
     Highcharts.each(this.point.extraForTooltip, function(info) { 
      ret += '<br/>' + info[0] + ': ' + info[1]; 
     }); 
     return ret; 
     } 
    }, 
    series: [{ 
     data: [ 
     [0, 1, [['opt1',123],['opt2','nice']] ], 
     [1, 2, [['opt2','bueno'],['opt3','ESP_#42']] ] 
     ], 
     keys: ['x', 'y', 'extraForTooltip'] 
    }]