Question

我是数据可视化的新手。我想调整饼图，以得到一个箭头环图，如下图所示。谢谢您的帮助

Answer 1

可以将Highcharts饼图定制为箭头环图。它需要一些自定义代码，但可以完成。我为您准备了一个甜甜圈图的示例，其中添加了自定义符号（有关自定义符号here的更多信息），此外，我覆盖了H.SVGRenderer.prototype.arc以使用我的自定义符号，而不是默认符号（饼图）。

因此，您需要添加的是箭头环路径（而不是圆弧），这是要解决的主要问题。高图将使用此符号绘制每个点（箭头环）。尝试在每个点的起点和终点的现有弧形路径上添加一条附加路径。这有点棘手，因为您将必须计算每个切片的极点（图表点）和角度以绘制适当的路径（起点或终点箭头）。

查看我在下面发布的演示，然后尝试更改那里的arc数组以了解我在说什么。还要检查Highcharts.SVGRenderer路径方法说明中的description，以了解如何创建自定义箭头路径。

演示：jsfiddle

HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>

JS：

// Define a custom symbol path
Highcharts.SVGRenderer.prototype.symbols.arcArrow = function(x, y, w, h, options) {
  var start = options.start,
    pick = Highcharts.pick,
    defined = Highcharts.defined,
    rx = options.r || w,
    ry = options.r || h || w,
    proximity = 0.001,
    fullCircle =
    Math.abs(options.end - options.start - 2 * Math.PI) <
    proximity,
    end = options.end - proximity,
    innerRadius = options.innerR,
    open = pick(options.open, fullCircle),
    cosStart = Math.cos(start),
    sinStart = Math.sin(start),
    cosEnd = Math.cos(end),
    sinEnd = Math.sin(end),
    // Proximity takes care of rounding errors around PI (#6971)
    longArc = options.end - start - Math.PI < proximity ? 0 : 1,
    arc;

  // Here you can define your arrows path instead of arc
  // Try to add additional code to beggining and end of existing arc

  arc = [
    'M',
    x + rx * cosStart,
    y + ry * sinStart,
    'A', // arcTo
    rx, // x radius
    ry, // y radius
    0, // slanting
    longArc, // long or short arc
    1, // clockwise
    x + rx * cosEnd,
    y + ry * sinEnd
  ];

  if (defined(innerRadius)) {
    arc.push(
      open ? 'M' : 'L',
      x + innerRadius * cosEnd,
      y + innerRadius * sinEnd,
      'A', // arcTo
      innerRadius, // x radius
      innerRadius, // y radius
      0, // slanting
      longArc, // long or short arc
      0, // clockwise
      x + innerRadius * cosStart,
      y + innerRadius * sinStart
    );
  }

  arc.push(open ? '' : 'Z'); // close
  return arc;
};
if (Highcharts.VMLRenderer) {
  Highcharts.VMLRenderer.prototype.symbols.arcArrow = Highcharts.SVGRenderer.prototype.symbols.arcArrow;
}


(function(H) {
  H.SVGRenderer.prototype.arc = function(x, y, r, innerR, start, end) {
    var arc,
      isObject = H.isObject,
      options;

    if (isObject(x)) {
      options = x;
      y = options.y;
      r = options.r;
      innerR = options.innerR;
      start = options.start;
      end = options.end;
      x = options.x;
    } else {
      options = {
        innerR: innerR,
        start: start,
        end: end
      };
    }

    // Arcs are defined as symbols for the ability to set
    // attributes in attr and animate
    arc = this.symbol('arcArrow', x, y, r, r, options);
    arc.r = r; // #959
    return arc;
  }
})(Highcharts);


Highcharts.chart('container', {
  series: [{
    type: 'pie',
    innerSize: '70%',
    data: [
      ['Chrome', 58.9],
      ['Firefox', 13.29],
      ['Internet Explorer', 13],
      ['Edge', 3.78],
      ['Safari', 3.42],
      {
        name: 'Other',
        y: 7.61,
        dataLabels: {
          enabled: false
        }
      }
    ]
  }]
});

希望对您有所帮助。如果您有任何麻烦或我的解释太复杂，请随时询问我。

将饼图更改为箭头环形图

1 个答案: