时间戳

首页 > 解决方案 > Highcharts :: Pie :: 添加特定系列的图标

jquery - Highcharts :: Pie :: 添加特定系列的图标

问题描述

我正在使用Highcharts 5.0.7饼图。

需要通过在其前后插入图标来突出显示其中一个数据项。

通过定位系列名称（Highlight），我可以使用 Highcharts 格式化程序选项向其中插入一些动态代码，如下所示：（

formatter: function () {
  if (this.point.name == 'Highlight') {
    return '<div class="ptit-icon PieTimerIconTop">Top</div><div class="ptit-icon PieTimerIconBottom">Bottom</div>';                                    
  }
},

如何为突出显示切片插入图标（之前和之后）？

我想要的是：

在此处输入图像描述

我得到了什么：

在此处输入图像描述

提琴手

代码

$(function () {
  var colors = ['#0d8aff', '#bc2f20', '#31ccfd', '#fd8f40'];
  pieData = [           
    { name: "", color: '#eaeaec', y: 50 },
    { name: "", color: '#97cc00', y: 12.5 },
    { name: "Highlight", color: '#5ba528', y: 12.5, className: "markerHighlight" },
    { name: "", color: '#b2d844', y: 12.5 },
    { name: "", color: '#97cc00', y: 12.5 }
  ];
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chartContainer',
      type: 'pie',
      height: 250,
      width: 250,
      borderRadius: 0
    },
    credits: { enabled: false },
    title: false,
    tooltip: false,
    plotOptions: {
      pie: {
        borderWidth: 0,
        startAngle: -45,
        innerSize: '95%',
        size: '100%',
        shadow: false,
        dataLabels: false,
      },
      series: {
        dataLabels: {
          useHTML: true,
          formatter: function () {
            if (this.point.name == 'Highlight') {
              return '<div class="ptit-icon PieTimerIconTop">Top</div><div class="ptit-icon PieTimerIconBottom">Bottom</div>';                                  
            }
          },
        }
      }
    },
    series: [{
      data: pieData,
    }]
  });
});

标签： jqueryhighcharts

解决方案

首先，您禁用了 dataLabels - 您必须启用它们。然后，您应该为带有箭头的元素正确定位和设置背景大小样式。

.ptit-icon {
    position: absolute;
    width: 12px;
    height: 10px;
    background-size: cover;
}

现场演示：http: //jsfiddle.net/BlackLabel/7g8249nh/

推荐阅读