Info-bulle dans les graphiques

Question

J'ai une fonction qui dessine un graphique à colonnes. Je souhaite ajouter des informations supplémentaires à l'info-bulle.

Voici ma fonction

function arm_bar_graph(result){ 

    $('#arms_graph').highcharts({ 
     chart: { 
      type: 'column', 
      backgroundColor : '#fafafa', 
      height : 300, 
     }, 
     title: { 
      text: 'Load Per Arm/Open Shipments' 
     }, 
     subtitle: { 
      text: '' 
     }, 
     xAxis: { 
      categories: result[0], 
      labels: { 
        rotation: -45, 
        align: 'right', 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: '' 
      } 
     }, 
     tooltip: { 
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
       '<td style="padding:0"><b>{point.y}</b></td></tr>', 
      footerFormat: '</table>', 
      shared: true, 
      useHTML: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      data: result[1], 
      name : 'Open Shipments', 
     }, 
     ] 
    }); 
} 

résultat est

[ 
    [ 
     u'Arm1', 
     u'Arm10', 
     u'Arm2', 
     u'Arm3', 
     u'Arm4', 
     u'Arm5', 
     u'Arm6', 
     u'Arm7', 
     u'Arm8', 
     u'Arm9' 
    ], 
    [ 
     10, 
     8, 
     9, 
     7, 
     6, 
     5, 
     4, 
     3, 
     2, 
     1 
    ], 
    { 
     u'Arm10': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 40, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm8': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 24, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm9': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 19, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm6': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 0, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': '1970-01-0100: 00: 00+00: 00' 
     }, 
     u'Arm7': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 22, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm4': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 0, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': '1970-01-0100: 00: 00+00: 00' 
     }, 
     u'Arm5': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 24, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm2': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 10, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm3': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 24, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     }, 
     u'Arm1': { 
      'bags_closed_per_arm': 0, 
      'total_pptls_per_arm': 40, 
      'last_bagged_on_arm_time': 'NoBagsclosedinthisinterval.', 
      'total_shipments_per_arm': 0, 
      'bags_open_per_arm': 0, 
      'last_packet_scan_arm_time': 'NoShipmentscannedonthisarm.' 
     } 
    } 
] 

Je veux ajouter plus d'informations à l'info-bulle qui est contenu dans le dictionnaire fourni dans le résultat. Comment puis je faire ça? Actuellement, l'info-bulle indique la valeur de l'axe Y, c'est-à-dire le résultat [1].

Comment ajouter des valeurs à partir du dictionnaire?

Answer 1

vous pouvez le faire en utilisant tooltip.formatter rappel

infobulle Code rappel formatter:

tooltip: { 
    formatter: function() { 
      return 'The value for <b>' + this.x + '</b> is <b>' + this.y + '</b>, in series '+ this.series.name; 
    } 
} 

REF: http://api.highcharts.com/highcharts#tooltip.formatter

WORKING DEMO ON JSFIDDLE

Bonne programmation :)

Answer 2

de suivre l'exemple de @dreamweiver http://api.highcharts.com/highcharts#tooltip.formatter

je besoin ce qui suit comme mon this.x déployait un grand nombre par exemple 1395187200000 affiche maintenant heureusement comme jeudi 06 février 2014

Highcharts.dateFormat('%A, %b %e, %Y', this.x)