2017-11-06 8 views
0

レンダリングしたいパイの棒使用時ハイチャート。私は別のキーワードの組み合わせでGoogle検索の10ページに行きましたが、解決策は見つかりませんでした。誰でも助けてくれますか?ハイチャートでバーのパイを作る方法はありますか?

これはExcelで簡単に作成できる「円グラフの棒グラフ」の写真です。

enter image description here

のPICソース:https://www.officetooltips.com/

+1

円グラフや棒グラフを組み合わせて、縦棒グラフのパイの更新系列値の選択に。 htth://www.highcharts.com/docs/chart-and-series-types/combining-chart-types –

+0

@ThirueswaranRajagopalanそれをしました。しかし、それは私が期待した通りにはならなかった。ここには謎があります:https://jsfiddle.net/girisagar46/ywtx5jwu/7/ – sgiri

答えて

0

このライブデモを参照してください: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リファレンス:

関連する問題