Question

我正在使用高图库，我的问题是，如果切片的值小于5％，它将不适合切片区域，如果值小于1％，2％等，我需要的是它将在切片的一侧出现，如下面的URL： sample image

$('#chart01').highcharts({
    chart: {
      height: 290,
        plotBackgroundColor: null,
        plotBorderWidth: 0,
        plotShadow: false,
        style: {
            fontFamily: 'OpenSansRegular'
        }
    },
    title: {
        text: '70',
        align: 'center',
        verticalAlign: 'middle',
        y: -25,
        style: {
            fontSize: "40"
        }
    },
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
        pie: {
            dataLabels: {
                enabled: true,
                distance: -15,
                formatter: function () {
                    return this.point.y + "%";
                },
                style: {
                    //fontWeight: 'bold',
                    color: 'white',
                    textOutline: false
                }
            },
            showInLegend: true
        }
    },
    legend: {
        width: 345,
        height: 150,
        itemWidth: 172,
        itemMarginBottom: 5,
        labelFormatter: function () {
            var words = this.name.split(/[\s]+/);
            var numWordsPerLine = 3;
            var str = [];
            for (var word in words) {
                if (word > 0 && word % numWordsPerLine == 0) str.push('<br>');
                str.push(words[word]);
            }
            return str.join(' ');
        }
    },
    series: [{
        colors: ['#04a15c', '#c038f3', '#5e9bfc', '#f39938', '#7c4ce9', '#e94c6b'],
        type: 'pie',
        name: 'Vendor invoices',
        innerSize: '65%',
        data: [
            ['19 Draft', 20]
            , ['10 Paid', 35]
            , ['11 Submitted', 4]
            , ['25 In review', 15]
            , ['40 Approved', 10]
            , ['15 Rejected', 1]
        ]
    }],
    responsive: {
        rules: [{
            condition: {
                maxWidth: 300
            },
            chartOptions: {
                legend: {
                    width: 255,
                    itemWidth: 125,
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'
                }
            }
        }]
    }
});

创建了一支笔，以便您查看问题， Codepen

在这张图片中我希望1％应该不在切片中。

Answer 1

Fiddle演示

在图表参数

中添加事件加载和重绘功能

  chart: {
    height: 290,
    plotBackgroundColor: null,
    plotBorderWidth: 0,
    plotShadow: false,
    style: {
      fontFamily: 'OpenSansRegular'
    },
    events: {
      load: function() {  //when chart is loaded action
        this.series[0].data.map((el) => {
          if (el.y < 2) { //if value is less than 2
            el.dataLabel.attr({
              y: el.dataLabel.y - 25
            });
            el.dataLabel.text.attr({
              style: "color:black"
            });
          }
        })
      },
      redraw: function() { //when chart is redraw or resized action
        this.series[0].data.map((el) => {
          if (el.y < 2) { //if value is less than 2
            el.dataLabel.attr({
              y: el.dataLabel.y - 25
            });
            el.dataLabel.text.attr({
              style: "color:black"
            });
          }
        })
      }
    }
  },

更新

只需要加载事件，并使用数据标签进行更新，其中值较小，结果数据标签来自图表。

  load: function() {
    this.series[0].data.map((el) => {
      if (el.y < 2) {
        el.update({
          dataLabels: {
            distance: 5 //updates with datalabels distance
          }
        })
        el.dataLabel.text.attr({
          style: "color:black"
        });
      }
    })
  },

Updated小提琴

如果数据标签不适合+高图，我们可以将数据标签设置在切片之外吗？

1 个答案: