时间戳

首页 > 解决方案 > 如何使用 highcharts 创建半饼图进度？

javascript - 如何使用 highcharts 创建半饼图进度？

问题描述

半馅饼进度，我想要什么

大家好。我怎样才能用highcharts实现这种半馅饼进度条？我尝试了很多，我的结果如下图所示。我想创建与第一张照片相同的数据标签。如果有什么办法，请告诉我。我将此代码用于数据：

dataLabels: {
        formatter: function() {
            return this.y > 1 ? '<b>' + this.point.name + ': ' + this.y + '%</b>' : null;
        }

我的结果

标签： javascripthighchartsangular8

解决方案

因此，我创建了一个具有自定义功能的指南，如何通过使用 SVGRenderer 功能呈现“附加”到饼图点的 dataLabel。

请参阅下面的代码和演示：https ://jsfiddle.net/BlackLabel/23ybcdjm/和带有路径的版本：https ://jsfiddle.net/BlackLabel/u843xnoe/

chart: {
    events: {
      render() {
        let chart = this,
          series = chart.series[0],
          point1 = series.points[0],
          point2 = series.points[1],
          shape1 = point1.shapeArgs,
          shape2 = point2.shapeArgs,
          distance,
          distance2 = 50,
          PI = -Math.PI,
          label1,
          label2,
          x1,
          y1,
          x2,
          y2;

        //check if label exist while resize
        if (chart.label1) {
          chart.label1.destroy()
        }

        if (chart.label2) {
          chart.label2.destroy()
        }


        //set x and y positions for labels
        x1 = shape1.x + (shape1.r * Math.cos(shape1.end));
        y1 = shape1.y + (shape1.r * Math.sin(shape1.end));
        x2 = shape2.x + shape2.r + distance2;
        y2 = shape2.y + chart.plotTop;


        //render label1
        chart.label1 = chart.renderer.label('Actual: ' + point1.y, x1, y1)
          .css({
            color: '#FFFFFF'
          })
          .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            zIndex: 6,
          })
          .add();

        //render label2
        chart.label2 = chart.renderer.label('Target: ' + point2.y, x2, y2)
          .css({
            color: '#FFFFFF'
          })
          .attr({
            fill: 'rgba(0, 0, 0, 0.75)',
            padding: 8,
            zIndex: 6,
          })
          .add();

        //find distance for label which is moving around the pie
        if (shape1.end > PI && shape1.end <= 0.55 * PI) {
          distance = -chart.label2.getBBox().width
        } else if (shape1.end > 0.55 * PI && shape1.end <= 0.45 * PI) {
          distance = -chart.label2.getBBox().width / 2
        } else if (shape1.end > 0.5 * PI && shape1.end < 0.25 * PI) {
          distance = chart.label2.getBBox().width / 3
        } else if (shape1.end > 0.25 * PI && shape1.end <= 0) {
          distance = chart.label2.getBBox().width / 2
        }

        label1 = chart.label1;
        label2 = chart.label2;

        //translate labels
        label1.translate(label1.x + distance + chart.plotLeft, label1.y)
        chart.label2.translate(chart.label2.x, chart.label2.y - chart.label2.getBBox().height)          
      }
    }
  },

API：https ://api.highcharts.com/highcharts/chart.events.render

API：https ://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

推荐阅读