2016-05-17 32 views
1

我正尝试使用Highcharts软件创建具有悬停效果的条形图。图表应该如下所示:http://www.computerbase.de/2016-02/directx-12-benchmarks-ashes-of-the-singularity-beta/#diagramm-ashes-of-the-singularity-1920-1080Highcharts:将数据标签显示为悬停时的相对值(百分比)

正如您所看到的,一旦将鼠标悬停在图表上,数据标签值就会变成百分比,并显示相对值。

创建图表本身不是问题。但是更改数据标签是。我如何遍历所有数据标签,计算相对值并更新标签? API不说太多。

$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: true 
      } 
     }, 
     series: { 
      point: { 
       events: { 
        mouseOver: function() { 
         // change text of all data labels 
         console.log(this); 
         console.log(this.chart); 
        } 
       } 
      } 
     } 
    } 
}); 
+0

真的看起来像一个[吸血鬼提问](http://slash7.com/2006/12/22/vampires/)给我..你尝试过什么了吗? –

+0

在API中找不到任何内容。我也做了'console.log(this);'并查看了图表对象中的方法,但没有任何内容可以访问所有数据标签。 – xwb

回答

0

这是可以做到Series.setData(),具有在mouseOver事件点的设置新的标签数据。使用dataLabelsformat选项可从系列中的点数据和key设置标签以设置标签信息。

例子:http://jsfiddle.net/pov2dt0q/

$(function() { 
    var startingData = [ 
     [1, '1'], 
     [2, '2'], 
     [3, '3'] 
    ], 
    percentData = [ 
     [ 
     [1, 'x 100%'], 
     [2, '200%'], 
     [3, '300%'] 
     ], 
     [ 
     [1, '50%'], 
     [2, 'x 100%'], 
     [3, '150%'] 
     ], 
     [ 
     [1, '33%'], 
     [2, '66%'], 
     [3, 'x 100%'] 
     ] 
    ]; 
    $('#container').highcharts({ 
    series: [{ 
     type: 'bar', 
     dataLabels: { 
     enabled: true, 
     inside: true, 
     align: 'right', 
     x: -5, 
     format: '{point.label}' 
     }, 
     data: $.extend([], startingData), 
     keys: ['y', 'label'], 
     point: { 
     events: { 
      mouseOver: function() { 
      this.series.setData(percentData[this.x]); 
      }, 
      mouseOut: function() { 
      this.series.setData(startingData); 
      } 
     } 
     } 
    }] 
    }); 
}); 
+0

正是我在找什么,谢谢! – xwb

0

你可以试试这个:

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/>'); 
} 

例子: http://jsfiddle.net/jugal/zAGGT/

相关问题