2016-04-14 65 views
1

我在下面的例子中工作https://jsfiddle.net/neelkamal0666/6737c2q5/Highcharts angular.js自定義提示

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], 

     }] 

     }); 

graph example

在提示我要顯示不同的值 例如,如果在播種用戶點擊它會顯示

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

而當用戶點擊活動時,它會顯示

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

當用戶點擊應用程序,它會顯示

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

而且當用戶點擊豐收,它會顯示

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

我讀Highchart的文檔,並通過大量的實例去但仍然無法弄清楚我該如何實現這一目標。

有人可以幫忙嗎?

回答

2

要更改工具提示顯示,您可以爲每個數據點添加更多信息,稍後訪問它並將其設置爲tooltipformatter

例如:https://jsfiddle.net/woo70ers/

這可能是更容易地在另一個陣列中的所有額外的信息 - 也更容易循環,無論附加到的。

簡單的例子: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'] 
    }] 
+1

非常感謝卡茨珀。這正是我所期待的。 –