Question

我正在使用Highcharts创建图表，但我希望在每个分组系列的工具提示中显示一个值，它是动态的，图表是在ajax成功创建的，因此每个groped系列都有不同的值显示在工具提示中

这是图表的图像：

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

这是我尝试但无法实现的 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/

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

1 个答案: