在饼图（高图）中突出显示活动数据标签

Question

我正在使用饼图（高图）并尝试在活动中获得突出显示效果我的意思是分离部分的标签（文本）。

有没有办法添加任何可以说是活动标签的 class，以便它可以通过 css 设置样式？

这是我正在尝试做的快照...有什么建议吗？？

Answer 1

您可以使用数据标签。在您的属性 series 中，您将拥有 dataLabels

https://api.highcharts.com/highcharts/plotOptions.pie.dataLabels

这里有一个例子：`

var colors = Highcharts.getOptions().colors,
  categories = [
    "Chrome",
    "Firefox",
    "Internet Explorer",
    "Safari",
    "Edge",
    "Opera",
    "Other"
  ],
  data = [
    {
      "y": 62.74,
      "color": colors[2],
      "drilldown": {
        "name": "Chrome",
        "categories": [
          "Chrome v65.0",
          "Chrome v64.0",
          "Chrome v63.0",
          "Chrome v62.0",
          "Chrome v61.0",
          "Chrome v60.0",
          "Chrome v59.0",
          "Chrome v58.0",
          "Chrome v57.0",
          "Chrome v56.0",
          "Chrome v55.0",
          "Chrome v54.0",
          "Chrome v51.0",
          "Chrome v49.0",
          "Chrome v48.0",
          "Chrome v47.0",
          "Chrome v43.0",
          "Chrome v29.0"
        ],
        "data": [
          0.1,
          1.3,
          53.02,
          1.4,
          0.88,
          0.56,
          0.45,
          0.49,
          0.32,
          0.29,
          0.79,
          0.18,
          0.13,
          2.16,
          0.13,
          0.11,
          0.17,
          0.26
        ]
      }
    },
    {
      "y": 10.57,
      "color": colors[1],
      "drilldown": {
        "name": "Firefox",
        "categories": [
          "Firefox v58.0",
          "Firefox v57.0",
          "Firefox v56.0",
          "Firefox v55.0",
          "Firefox v54.0",
          "Firefox v52.0",
          "Firefox v51.0",
          "Firefox v50.0",
          "Firefox v48.0",
          "Firefox v47.0"
        ],
        "data": [
          1.02,
          7.36,
          0.35,
          0.11,
          0.1,
          0.95,
          0.15,
          0.1,
          0.31,
          0.12
        ]
      }
    },
    {
      "y": 7.23,
      "color": colors[0],
      "drilldown": {
        "name": "Internet Explorer",
        "categories": [
          "Internet Explorer v11.0",
          "Internet Explorer v10.0",
          "Internet Explorer v9.0",
          "Internet Explorer v8.0"
        ],
        "data": [
          6.2,
          0.29,
          0.27,
          0.47
        ]
      }
    },
    {
      "y": 5.58,
      "color": colors[3],
      "drilldown": {
        "name": "Safari",
        "categories": [
          "Safari v11.0",
          "Safari v10.1",
          "Safari v10.0",
          "Safari v9.1",
          "Safari v9.0",
          "Safari v5.1"
        ],
        "data": [
          3.39,
          0.96,
          0.36,
          0.54,
          0.13,
          0.2
        ]
      }
    },
    {
      "y": 4.02,
      "color": colors[5],
      "drilldown": {
        "name": "Edge",
        "categories": [
          "Edge v16",
          "Edge v15",
          "Edge v14",
          "Edge v13"
        ],
        "data": [
          2.6,
          0.92,
          0.4,
          0.1
        ]
      }
    },
    {
      "y": 1.92,
      "color": colors[4],
      "drilldown": {
        "name": "Opera",
        "categories": [
          "Opera v50.0",
          "Opera v49.0",
          "Opera v12.1"
        ],
        "data": [
          0.96,
          0.82,
          0.14
        ]
      }
    },
    {
      "y": 7.62,
      "color": colors[6],
      "drilldown": {
        "name": 'Other',
        "categories": [
          'Other'
        ],
        "data": [
          7.62
        ]
      }
    }
  ],
  browserData = [],
  versionsData = [],
  i,
  j,
  dataLen = data.length,
  drillDataLen,
  brightness;


// Build the data arrays
for (i = 0; i < dataLen; i += 1) {

  // add browser data
  browserData.push({
    name: categories[i],
    y: data[i].y,
    color: data[i].color
  });

  // add version data
  drillDataLen = data[i].drilldown.data.length;
  for (j = 0; j < drillDataLen; j += 1) {
    brightness = 0.2 - (j / drillDataLen) / 5;
    versionsData.push({
      name: data[i].drilldown.categories[j],
      y: data[i].drilldown.data[j],
      color: Highcharts.Color(data[i].color).brighten(brightness).get()
    });
  }
}

// Create the chart
Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: 'Browser market share, January, 2018'
  },
  subtitle: {
    text: 'Source: <a href="http://statcounter.com" target="_blank">statcounter.com</a>'
  },
  yAxis: {
    title: {
      text: 'Total percent market share'
    }
  },
  plotOptions: {
    pie: {
      shadow: false,
      center: ['50%', '50%']
    }
  },
  tooltip: {
    valueSuffix: '%'
  },
  series: [{
    name: 'Browsers',
    data: browserData,
    size: '60%',
    dataLabels: {
      formatter: function () {
        return this.y > 5 ? this.point.name : null;
      },
      color: 'red',
      distance: -30
    }
  }, {
    name: 'Versions',
    data: versionsData,
    size: '80%',
    innerSize: '60%',
    dataLabels: {
      color: 'red',
      formatter: function () {
        // display only if larger than 1
        return this.y > 1 ? '<b>' + this.point.name + ':</b> ' +
          this.y + '%' : null;
      }
    },
    id: 'versions'
  }],
  responsive: {
    rules: [{
      condition: {
        maxWidth: 400
      },
      chartOptions: {
        series: [{
          id: 'versions',
          dataLabels: {
            enabled: false
          }
        }]
      }
    }]
  }
});

#container {
  max-width: 660px;
  margin: auto;
  height: 400px;
  margin: 0 auto;
}

.highcharts-text-outline{
  color: red;
}

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

`

Answer 2

您可以使用 addClass 方法从选定的点开始数据标签，然后按照您想要的方式设置样式：

    point: {
        events: {
            select: function() {
                var points = this.series.points;

                Highcharts.each(points, function(p) {
                    if (p.dataLabel.hasClass('data-label-selected')) {
                        p.dataLabel.removeClass('data-label-selected');
                    }
                });
                this.dataLabel.addClass('data-label-selected');
            }
        }
    }

现场演示：https://jsfiddle.net/BlackLabel/g0fcyhL2/

API: https://api.highcharts.com/class-reference/Highcharts.SVGElement#addClass

在饼图（高图）中突出显示活动数据标签

Highlight active data label in Pie Chart (High Chart)

javascript

css

highcharts

pie-chart