Question

我正试图在甜甜圈外面实现圆形图注释的位置。我试过距离，x＆amp; y属性，但它们没有提供所需的结果。我们有什么方法可以为甜甜圈图表定位注释吗？ Jsfiddle链接是：http://jsfiddle.net/83dhb04j/5/

代码是：

    Highcharts.chart('container', {
  title: {
    text: 'Highcharts Annotations'
  },

  subtitle: {
    text: 'Annotation label shapes'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: false
      }
    }
  },
  series: [{
    type: 'pie',
    innerSize: '90%',
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5']
    ]
  }],

  tooltip: {
    enabled: false
  },

  annotations: [{
    labels: [{
      point: '0',
      shape: 'callout',
      y: -65,
      useHTML:true,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '1',
      shape: 'callout',
      useHTML:true,
      y: -50,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '2',
      shape: 'callout',
      useHTML:true,
      y: -50,
      x: 10,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }


    }, {
      point: '3',
      shape: 'callout',
      useHTML:true,
      y: 70,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '4',
      shape: 'callout',
      useHTML:true,
      y: 80,
      formatter: function() {
       return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }

    }, {
      point: '5',
      shape: 'callout',
      useHTML:true,
      y: -60,
      formatter: function() {
        return "<span onclick='getVal("+this.y+")' style='cursor: pointer'>$" + this.y+"</span>"
      }
    }]
  }]
});
function getVal(obj){
alert("value of y is $"+ obj)
}

如果使用datalabel属性可以实现，请同时建议该解决方案。

Answer 1

检查此SO post以供参考。您的要求非常独特。根据动态数据制作自己的算法来放置标注。

我设法只获得了两个位置“左”和“右”，我更新了标注的位置。

Highcharts.chart('container', {

  title: {
    text: 'Highcharts Annotations'
  },

  subtitle: {
    text: 'Annotation label shapes'
  },
  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        useHTML: true,
        connectorWidth: 0,
        formatter: function() {
          //console.log(this.point.labelPos)
          if (this.point.labelPos[6] == "left") {
            return '<div class="callout right" onclick="getVal(' + this.y + ')" >$' + this.y + '</div>'
          }
          if (this.point.labelPos[6] == "right") {
            return '<div class="callout left" onclick="getVal(' + this.y + ')" >$' + this.y + '</div>'
          }

        }
      }
    }
  },
  series: [{
    type: 'pie',
    innerSize: '70%',
    keys: ['y', 'id'],
    data: [
      [29.9, '0'],
      [71.5, '1'],
      [106.4, '2'],
      [129.2, '3'],
      [144.0, '4'],
      [176.0, '5']
    ]
  }],

  tooltip: {
    enabled: false
  },


});

function getVal(obj) {
  alert("value of y is $" + obj)
}

#container {
  max-width: 800px;
  margin: 0 auto;
}

div.callout {
  background-color: #444;
  background-image: -moz-linear-gradient(top, #444, #444);
  position: relative;
  color: #ccc;
  padding: 5px;
  border-radius: 3px;
  box-shadow: 0px 0px 20px #999;
  border: 1px solid #333;
  text-shadow: 0 0 1px #000;
  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}

.callout::before {
  content: "";
  width: 0px;
  height: 0px;
  border: 0.8em solid transparent;
  position: absolute;
}

.callout.top::before {
  left: 30%;
  bottom: -20px;
  border-top: 11px solid #444;
}

.callout.bottom::before {
  left: 45%;
  top: -20px;
  border-bottom: 10px solid #444;
}

.callout.left::before {
  right: -19px;
  top: 10%;
  border-left: 10px solid #444;
}

.callout.right::before {
  left: -20px;
  top: 10%;
  border-right: 10px solid #444;
}

.callout.top-left::before {
  left: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

.callout.top-right::before {
  right: 7px;
  bottom: -20px;
  border-top: 10px solid #444;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container" style="height: 400px; margin-top: 1em"></div>

Fiddle演示

更新，用于与数据标签背景相同颜色的标注形状颜色匹配

按照步骤

在highcharts中添加custon颜色

颜色：['＃058DC7'，'＃50B432'，'＃ED561B'，'＃DDDF00'，'＃24CBE5'，'＃64E572']，
相应地添加css

.callout.left::before { //default behaviour
  right: -19px;
  top: 10%;
}

.callout.left0::before { //setting border color of specific element having color index (means #058DC7 is first color index of color added beginning) 
  border-left: 10px solid #058DC7;
}

.callout.left1::before {
  border-left: 10px solid #50B432;
}

.callout.left2::before {
  border-left: 10px solid #ED561B;
}

.callout.left3::before {
  border-left: 10px solid #DDDF00;
}

.callout.left4::before {
  border-left: 10px solid #24CBE5;
}

.callout.left5::before {
  border-left: 10px solid #64E572;
}

更新plotoption函数添加带颜色索引的类

 formatter: function() {
  if (this.point.labelPos[6] == "left") {
    return '<div class="callout right right' + this.point.colorIndex + '" style="background:' + this.point.color + '">' + this.y + '</div>'
  }
  if (this.point.labelPos[6] == "right") {
    return '<div  class="callout left left' + this.point.colorIndex + '" style="background:' + this.point.color + '">' + this.y + '</div>'
  }

}

Updated演示

圆形图的Highcharts注释

1 个答案: