ツールヒントのグループ化されたシリーズのデータ​​を表示ハイチャート

Question

ハイチャートを使用してチャートを作成していますが、グループ化されたシリーズごとにツールチップの値を動的に表示し、チャートがajaxの成功で作成するため、ツールチップ

ここでは、チャートの画像です：

私はAjaxの成功から

来る動的な値を見出し、サブを追加するように、このツールチップは、カテゴリーごとの見出しでグループごとに示されています

これはフィドルである：これは私がしようとしたができなかっ達成するために http://jsfiddle.net/KWPsv/80/

http://jsfiddle.net/KWPsv/82/

マイコード：

  success: function (data1) { 
       debugger; 
       var Series = JSON.parse(data1.d.ChartSeries); 
       var Categories = JSON.parse(data1.d.Categories); 
       var mYtitle = data1.d.TitleName; 

     Highcharts.setOptions ({ 
     colors:[ 
      '#5a9bd4', 
      '#faa75b', 
      '#7ac36a', 
      '#9e67ab', 
      '#f15a60', 
      '#ce7058', 
      '#d77fb4' 
     ] 
    }); 

    var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo:'containerHR', 
     type:'column' 
    }, 
    title:{ 
     text:'Chart Title' 
    }, 
    credits:{enabled:false}, 
    legend:{ 
    }, 
    tooltip:{ 
     shared:true   
    }, 
    plotOptions: { 
     series: { 
      shadow:false, 
      borderWidth:0, 
      pointPadding:0 
     } 
    }, 
    xAxis:{ 
     categories:Categories[0].categories, 
     lineColor:'#999', 
     lineWidth:1, 
     tickColor:'#666', 
     tickLength:3, 
     title:{ 
      text:'X Axis Title', 
      style:{ 
       color:'#333' 
      } 
     }, 
     labels: { 
     useHTML: true, 

    } 
    }, 
    yAxis:{ 
     lineColor:'#999', 
     lineWidth:1, 
     tickColor:'#666', 
     tickWidth:1, 
     tickLength:3, 
     gridLineColor:'#ddd', 
     title:{ 
      text:'Y Axis Title', 
      rotation:0, 
      margin:50, 
      style:{ 
       color:'#333' 
      } 
     } 
    }, 
    tooltip: { 
     useHTML: true, 
     shared: true, 
     headerFormat: '<b>{series.name}</b><br/>', 

    }, 

    legend: { 
     useHTML: true 

    }, 


    series: Series 


}); 

Answer 1

あなたはツールチップフォーマッタを使用することができると、このフォーマッタ返される文字列内の必要がありますグラフに表示するすべての値： http://api.highcharts.com/highcharts/tooltip.formatter

tooltip: { 
    shared: true, 
    formatter: function() { 
     var s = [], 
     xAxis = this.points[0].series.xAxis, 
     categoryIndex = xAxis.categories.indexOf(this.x), 
     title = this.x, 
     subTitle = xAxis.options.subtitles[categoryIndex]; 
     s.push(title + '<br>'); 
     s.push(subTitle + '<br>'); 
     $.each(this.points, function(i, point) { 
     s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' + 
      point.y + '<span>'); 
     }); 

     return s.join(' and '); 
    }, 
    }, 

tooltip.formatterでチャートを示すライブ例： http://jsfiddle.net/KWPsv/86/