0
レンダリングしたいパイの棒使用時ハイチャート。私は別のキーワードの組み合わせでGoogle検索の10ページに行きましたが、解決策は見つかりませんでした。誰でも助けてくれますか?ハイチャートでバーのパイを作る方法はありますか?
これはExcelで簡単に作成できる「円グラフの棒グラフ」の写真です。
のPICソース:https://www.officetooltips.com/
レンダリングしたいパイの棒使用時ハイチャート。私は別のキーワードの組み合わせでGoogle検索の10ページに行きましたが、解決策は見つかりませんでした。誰でも助けてくれますか?ハイチャートでバーのパイを作る方法はありますか?
これはExcelで簡単に作成できる「円グラフの棒グラフ」の写真です。
のPICソース:https://www.officetooltips.com/
このライブデモを参照してください: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リファレンス:
円グラフや棒グラフを組み合わせて、縦棒グラフのパイの更新系列値の選択に。 htth://www.highcharts.com/docs/chart-and-series-types/combining-chart-types –
@ThirueswaranRajagopalanそれをしました。しかし、それは私が期待した通りにはならなかった。ここには謎があります:https://jsfiddle.net/girisagar46/ywtx5jwu/7/ – sgiri