在ToolTip Highcharts中显示分组系列的数据

Question

我正在使用Highcharts创建图表，但是我想在工具提示中为每个分组的系列显示一个值，因为它是动态的，并且图表正在以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/