Highcharts定製漏斗

Question

我是新來的Highcharts圖書館，需要創建一個水平漏斗。有一個現有的漏斗：http://www.highcharts.com/demo/funnel但沒有選項可以使其水平。我一直在閱讀關於如何擴展highcharts的文檔，但我不知道如何做到這一點。是否可以用Highcharts創建這個水平漏斗？

Answer 1

遺憾的是它不支持

http://forum.highcharts.com/post100466.html?hilit=funnel%20orientation#p100466

Answer 2

它不是從您發佈的圖像的圖表，但你可以得到倒從堆積面積系列金字塔/漏斗。

例子：http://jsfiddle.net/r9mtoec8/

$(function() { 
    var rawData = [7, 14, 16, 5, 4], 
    data = [ 
     [0, 100] 
    ], 
    overData = [ 
     [0, 0] 
    ], 
    underData = [ 
     [0, 0] 
    ], 
    zones = [], 
    len = rawData.length, 
    colors = Highcharts.getOptions().colors, 
    maxColor = colors.length, 
    i, val, sum = 0, 
    pos = 0; 

    for (i = 0; i < len; i++) { 
    sum += rawData[i]; 
    } 

    for (i = 0; i < len; i++) { 
    pos += rawData[i]; 
    val = (sum - pos)/sum * 100; 
    data.push([pos, val]); 
    overData.push([pos, (100 - val)/2]); 
    underData.push([pos, (100 - val)/2]); 
    zones.push({ 
     value: pos, 
     color: colors[i % maxColor] 
    }); 
    } 



    $('#container').highcharts({ 
    chart: { 
     type: 'area' 
    }, 
    yAxis: { 
     title: { 
     text: 'Percent' 
     } 
    }, 
    plotOptions: { 
     area: { 
     enableMouseTracking: false, 
     showInLegend: false, 
     stacking: 'percent', 
     lineWidth: 0, 
     marker: { 
      enabled: false 
     } 
     } 
    }, 
    series: [{ 
     name: 'over', 
     color: 'none', 
     data: overData 
    }, { 
     id: 's1', 
     name: 'Series 1', 
     data: data, 
     showInLegend: true, 
     zoneAxis: 'x', 
     zones: zones 
    }, { 
     name: 'under', 
     color: 'none', 
     data: underData 
    }] 
    }); 
}); 

從圖像你的圖表是在Highcharts可行的，但你會需要修改您的數據和圖表的設置。虛線可以使用設置破折號的線條來完成。例如：