有什么办法可以制作高图表的派吧？

Question

我想呈现条的派在使用高级图表。我用不同的关键字组合浏览了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引用：

• https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path
• https://api.highcharts.com/highcharts/plotOptions.column.maxPointWidth
• https://api.highcharts.com/highcharts/xAxis.visible