Question

我想使用 Highcharts 渲染 Pie of Bar 。我使用不同的关键字组合浏览了Google搜索的第10页，但找不到任何解决方案。谁能帮帮我吗？

这是“饼图栏”的图片，可以通过Excel轻松制作。

图片来源：https://www.officetooltips.com/

Answer 1

请参阅此实时演示：https://jsfiddle.net/kkulig/y62L2hdk/

我隐藏了两个轴并使用pointWidth来减小列的宽度。 load事件处理渲染连接线的非常简化的机制：

  load: function() {
    var chart = this;
    piePoint = chart.series[2].points[0],
      columnPointTop = chart.series[0].points[0],
      columnPointBottom = chart.series[1].points[0],
      arcPathArr = piePoint.graphic.d.split(" "),
      renderer = chart.renderer,
      pathAttrs = {
        'stroke-width': 1,
        stroke: Highcharts.getOptions().colors[0]
      };

    // extracting paths from pie point path (arc)
    var firstPieCorner = arcPathArr.slice(0, 3),
      secondPieCorner = arcPathArr.slice(4, 6);

    firstPieCorner[1] = new Number(firstPieCorner[1]) + chart.plotLeft;
    firstPieCorner[2] = new Number(firstPieCorner[2]) + chart.plotTop;

    secondPieCorner.unshift("M");
    secondPieCorner[1] = new Number(secondPieCorner[1]) + firstPieCorner[1];
    secondPieCorner[2] = new Number(secondPieCorner[2]) + firstPieCorner[2];

    // top connector
    renderer.path(firstPieCorner.concat(["L", columnPointTop.shapeArgs.x + chart.plotLeft, columnPointTop.shapeArgs.y + chart.plotTop]))
      .attr(pathAttrs)
      .add();

    // upper connector
    renderer.path(secondPieCorner.concat(["L", columnPointBottom.shapeArgs.x + chart.plotLeft, columnPointBottom.shapeArgs.y + columnPointBottom.shapeArgs.height + chart.plotTop]))
      .attr(pathAttrs)
      .add();
  }

此代码仅用于示例目的 - 需要对其进行改进以使连接器响应。

API参考：

在Highcharts中有没有可能制作Bar of Pie的方法？

1 个答案: