时间戳

首页 > 解决方案 > 对齐高图甜甜圈中的标签

node.js - 对齐高图甜甜圈中的标签

问题描述

我正在尝试制作一个侧面带有图例的高图甜甜圈，我真的很难让数据标签更加居中。此刻他们每个人都在不同的地方，

预期结果的图像：

这是预期结果的图像

https://codepen.io/mattdavidson/pen/qgqZyV

Highcharts.chart('container', {
  credits: { enabled: false },
  chart: { height: 300, width: 500, animation: false },
  title: {
    align: 'center',
    verticalAlign: 'middle',
    text: 10,
    y: 25,
    x: 55,
    style: { color: '#333333', fontSize: '72px', fontWeight:'bold'},
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        format: '{point.y}',
        distance: -25,
        style: { fontSize: '32px', textOutline: 0 },
      },
      animation: false,
      showInLegend: true,
    },
  },
  legend: {
    layout: 'vertical',
    verticalAlign: 'middle',
    align: 'left',
    symbolHeight: 25,
    symbolRadius: 5,
    itemMarginTop: 10,
    itemMarginBottom: 10,
  },
  series: [
  {
  type: 'pie',
  innerSize: '55%',
  colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
  data: [['Category 1', 4], ['Category 2', 5], ['Category 3', 1]],
  },
  ],
});

标签： node.jshighcharts

解决方案

Highcharts github 上报告了一个关于甜甜圈标签位置的问题。在这里查看：https ://github.com/highcharts/highcharts/issues/9005 。

我更改了一些选项，并在甜甜圈中心使用Highcharts.SVGRenderer#text（所有值的动态总和）添加了自定义文本。也许它会帮助你：https ://jsfiddle.net/BlackLabel/2jmqext9/ 。

代码：

Highcharts.chart('container', {
  credits: {
    enabled: false
  },
  chart: {
    height: 300,
    width: 500,
    animation: false,
    events: {
        load: function() {
        var chart = this,
                offsetLeft = -20,
            offsetTop = 10,
                x = chart.plotLeft + chart.plotWidth / 2 + offsetLeft,
            y = chart.plotTop + chart.plotHeight / 2 + offsetTop,
            value = 0;

                chart.series[0].yData.forEach(function(point) {
            value += point;
        });

        chart.renderer.text(value, x, y).add().css({
            fontSize: '30px'
        }).toFront();
      }
    }
  },
  plotOptions: {
    pie: {
      dataLabels: {
        enabled: true,
        color: '#fff',
        format: '{point.y}',
        distance: -25,
        style: {
          fontSize: '20px',
          textOutline: 0
        },
      },
      animation: false,
      showInLegend: true,
    },
  },
  legend: {
    layout: 'vertical',
    verticalAlign: 'middle',
    align: 'left',
    symbolHeight: 15,
    symbolRadius: 5,
    symbolPadding: 10,
    itemMarginTop: 10,
    itemMarginBottom: 10,
    itemStyle: {
        fontSize: '15px'
    }
  },
  series: [{
    type: 'pie',
    innerSize: '55%',
    colors: ['rgb(212,33,71)', 'rgb(250,189,43)', 'rgb(60,168,74)'],
    data: [
      ['Category 1', 4],
      ['Category 2', 2],
      ['Category 3', 12]
    ],
  }, ],
});

推荐阅读