在Highcharts中的所有类别中放置文本 [英] put a text in all categories in Highcharts

问题描述

花了很长时间与这个相同的问题，然后我感谢太多，如果我可以帮助。

我研究了很多，并理解，通过这种方法，我有我的代码不会运行。那么我可以让它工作，我该怎么办？我试过很多事情。我不明白如何调整一个渲染文本或之前的所有系列。

我想将VALUE设置为RIGHT的值，系列（在我的情况下，bar1，bar2，bar3），总是在酒吧的左。如图所示。

这个是我的代码：

当它小于30，bar且值必须在栏外。

我感谢您的帮助，很少css和这个库。我仍然无法使用。

解决方案

可以使用dataLabels格式化程序：
http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.formatter

  formatter：function（）{
 var string = this.series.name +''; 
 if（this.y< = 30）{
 string + = this.y; 
} 
 return string; 
}，
  

此处您将有两个可能的dataLabels字符串，具体取决于您的积分值。

您可以使用Renderer.text添加自定义函数，负责在图表中添加第二个dataLabel：
http://api.highcharts.com/highcharts#Renderer.text

  var addSecondLabel = function（chart）{
 $（'。labelText'）。remove（）; 
 var series = chart.series，
 dataLabel，barHeight; 
 Highcharts.each（series，function（ob，j）{
 Highcharts.each（ob.data，function（p，i）{
 if（py> 30）{
 barHeight = p.graphic.element.height.animVal.value; 
 dataLabel = p.dataLabel; 
 chart.renderer.text（PY，dataLabel.x + chart.plotLeft + barHeight，dataLabel。 y + chart.plotTop + 11）.attr（{
 zIndex：100 
}）。addClass（'labelText'）。css（{
color：contrast，
fontSize：11px，
fontWeight：bold，
textShadow：0 0 6px contrast，0 0 3px contrast
}）add ）; 
}否则如果（吡啶大于0）{
 barHeight = p.graphic.element.height.animVal.value; 
 dataLabel = p.dataLabel; 
页。 dataLabel.translate（dataLabel.x + barHeight，dataLabel.y）; 
} 
}）; 
}）; 
} 
  

这里我遍历所有点并添加第二个标签大于30.我使用这个点的x和y参数dataLabel，但我需要添加chart.plotLeft和chart.plotTop，因为图表plotArea不直接在左上角。

我向我的标签添加类，因为我将改变他们在重绘的位置，我需要删除以前的标签添加新的位置的标签。

如果我的点大于0但小于30，我不添加新标签。我只是翻译旧的，所以它可以在列的左侧。

示例：
http://jsfiddle.net/pb1q9wzk/31/

took a long time with this same question, then I appreciate too if I can help.

I researched a lot and understand that by this method that I have in my code will not run. then I can make it work, how I can do? I have tried many things. I do not understand how to adapt a render text or so ago all of my series.

I want to set the VALUE to RIGHT of the bar, and the value of the SERIES (in my case bar1, bar2, bar3) that are always at the LEFT of the bar. as it is in the picture.

this is my code:

http://jsfiddle.net/pb1q9wzk/

plotOptions: {
 bar: {
 dataLabels: {
   padding: 0,
   allowOverlap: true,
   enabled: true,
   align: 'left',
   color: '#FFFFFF',
   inside: true,
   crop: false,
   overflow: "none",
   formatter: function() {            
      return this.series.name + " " + this.y;                       
    },
  style: {
  width:100
 }                       
. 
.
.

UPDATE

when it is less than 30, so it appears.

when it is less than 30, "bar" and the value must be outside of the bar.

and when the value is 0, I want to be displayed to the right of "bar".

I appreciate the help, very little css and this library. I still can not get used.

解决方案

You can do it using dataLabels formatter: http://api.highcharts.com/highcharts#plotOptions.area.dataLabels.formatter

      formatter: function() {
        var string = this.series.name + ' ';
        if (this.y <= 30) {
          string += this.y;
        }
        return string;
      },

Here you will have two possible dataLabels strings, depending on your point value.

You can add custom function responsible for adding second dataLabel in your chart, using Renderer.text: http://api.highcharts.com/highcharts#Renderer.text

  var addSecondLabel = function(chart) {
    $('.labelText').remove();
    var series = chart.series,
      dataLabel, barHeight;
    Highcharts.each(series, function(ob, j) {
      Highcharts.each(ob.data, function(p, i) {
        if (p.y > 30) {
          barHeight = p.graphic.element.height.animVal.value;
          dataLabel = p.dataLabel;
          chart.renderer.text(p.y, dataLabel.x + chart.plotLeft + barHeight, dataLabel.y + chart.plotTop + 11).attr({
            zIndex: 100
          }).addClass('labelText').css({
            "color": "contrast",
            "fontSize": "11px",
            "fontWeight": "bold",
            "textShadow": "0 0 6px contrast, 0 0 3px contrast"
          }).add();
        } else if (p.y > 0) {
          barHeight = p.graphic.element.height.animVal.value;
          dataLabel = p.dataLabel;
          p.dataLabel.translate(dataLabel.x + barHeight, dataLabel.y);
        }
      });
    });
  }

Here I am iterating over all points and adding second label if value of my point is bigger than 30. I am using x and y parameters of this point dataLabel, but I need to add chart.plotLeft and chart.plotTop because chart plotArea is not directly at top left corner.

I am adding class to my labels because I will change their position on redraw and I need to delete previous labels to add labels with new positions.

If my point is bigger than 0 but smaller than 30 I am not adding new label. I am just translating old one so it can be on the left side of column.

example: http://jsfiddle.net/pb1q9wzk/31/

这篇关于在Highcharts中的所有类别中放置文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！