javascript - 在工具提示 Highcharts 中显示分组系列的数据

Question

我正在使用 Highcharts 创建图表，但我想在工具提示中显示每个分组系列的值，它是动态的，并且图表是在 ajax 中成功创建的，因此每个摸索的系列在工具提示中显示不同的值

这是图表图像:

此工具提示针对每个组显示，每个组的标题均为类别，因此我想添加一个具有来自 ajax 成功的动态值的子标题

这是 fiddle : 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/