时间戳

首页 > 解决方案 > Highcharts 堆叠漏斗图与水平堆叠

charts - Highcharts 堆叠漏斗图与水平堆叠

问题描述

我们希望使用 Highcharts 和 Angular 的可视化看起来像这样。任何人都可以帮助我实施，我也在尝试，一旦我得到它，我会更新我的答案，只是想看看是否有人可以帮助我更快地做到这一点。 在此处输入图像描述

标签： chartshighchartsvisualizationangular2-highcharts

解决方案

我认为您应该使用该columnrange系列来达到想要的结果 - https://www.highcharts.com/demo/columnrange

您可以从以下基本尝试开始：https ://jsfiddle.net/BlackLabel/h5v7czmt/

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true
  },
    
    yAxis: {
        visible: false
    },
    
    xAxis: {
        categories: ['All Applicants', 'Not Considered']
    },

  plotOptions: {
    series: {
      stacking: 'normal',
            showInLegend: false
    }
  },

  series: [{
    name: 'test1',
    data: [
      [0, 650],
            [285, 650]
    ]
  }, {
    name: 'test2',
    data: [
      [650, 1025],
            [650, 867]
    ]
  }, {
        name: 'test3',
        data: [
            [1025, 1220],
            [867, 1032]
        ]
    }]

});

以及 Highcharts Angular 包装器的 API - https://github.com/highcharts/highcharts-angular

推荐阅读