ツールチップをハイチャートでカスタマイズする

Question

HighChartのツールチップ機能をカスタマイズしたいと思います。 私は棒グラフを持っています。ホバー上でツールチップにはただ1つの値しか表示されませんが、私は3つの値を示したかったのです。以下は

私のコードです：

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: '' 
      }, 
      subtitle: { 

      }, 
      xAxis: { 
       categories: ['Question\'s'], 
       title: { 
        text: '' 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Average Scores', 

       }, 
       labels: { 
        overflow: 'justify' 
       } 
      }, 
      tooltip: { 
       valueSuffix: '' 
      }, 
      plotOptions: { 
       bar: { 
        dataLabels: { 
         enabled: true 
        } 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: 10, 
       y: -10, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
       shadow: true 
      }, 
      credits: { 
       enabled: false 
      }, 
      series: [{ 
       name: 'My Issue', 
       data: [5.4] 
// want to add some value here to display 
      }, { 
       name: 'My Knowledge', 
       data: [8.2] 
// want to add some value here to display 
      }, { 
       name: 'My Friendliness', 
       data: [7] 
// want to add some value here to display 
      }, 
      { 
       name: 'My time', 
       data: [6] 
// want to add some value here to display 
      }, 
      { 
       name: 'Z Score', 
       data: [9] 
// want to add some value here to display 
      } 
      ] 

     }); 
    }); 

のJSフィドル：http://jsfiddle.net/bu5fs1Lj/2/

Answer 1

あなたが好きchart.tooltip.options.formatterを使用することができます。

chart.tooltip.options.formatter = function() { 
    var xyArr=[]; 
    $.each(this.points,function(){ 
     xyArr.push('Serie: ' + this.series.name + ', ' +'X: ' + this.x + ', Y: ' +this.y); 
    }); 
    return xyArr.join('<br/>'); 
} 

はここでここでfiddle

だformating tooltips詳細です

Answer 2

私は、2つの値で、ここでフィドルを作業

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: '' 
     }, 
     subtitle: { 

     }, 
     xAxis: { 
      categories: ['Question\'s'], 
      title: { 
       text: '' 
      } 
     }, 
     yAxis: { 
      min: 0, 
      title: { 
       text: 'Average Scores', 

      }, 
      labels: { 
       overflow: 'justify' 
      } 
     }, 
     tooltip: {formatter: function(){ 
     return 'The value for <b>' + this.y + '</b><br>Total Survey is <b>' + this.series.options.Credit[this.point.index] + '</b>'; 
    } 

    }, 
     plotOptions: { 
      bar: { 
       dataLabels: { 
        enabled: true 
       } 
      } 
     }, 
     legend: { 
      layout: 'vertical', 
      align: 'right', 
      verticalAlign: 'top', 
      x: 10, 
      y: -10, 
      floating: true, 
      borderWidth: 1, 
      backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'), 
      shadow: true 
     }, 
     credits: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'My Issue', 
      data: [5.4], 
      Credit: [21] 
     }, { 
      name: 'My Knowledge', 
      data: [8.2], 
      Credit: [22] 
     }, { 
      name: 'My Friendliness', 
      data: [7], 
      Credit: [22] 
     }, 
     { 
      name: 'My time', 
      data: [6], 
      Credit: [22] 
     }, 
     { 
      name: 'Z Score', 
      data: [9], 
      Credit: [22], 
      Credit: [22] 
     } 
     ] 

    }); 
}); 

それを見つけた：http://jsfiddle.net/bu5fs1Lj/3/