javascript - 圆环图的 Highcharts 注释

Question

我正在尝试在甜甜圈之外实现甜甜圈图的注释位置。我尝试了距离、x 和 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 属性可以做到这一点，请也提出该解决方案。

score 0 · Accepted Answer

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

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

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>

小提琴演示

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

按照步骤

在 highcharts 中添加自定义颜色

颜色：['#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>'
  }

}

更新的演示

javascript - 圆环图的 Highcharts 注释

1 回答 1

Related

Reference