首页 > 解决方案 > 组合图 - 带条形图的字图

问题描述

我正在为我的一个项目使用highcharts,我想知道是否可以有条形图和词云图的组合图。如下图所示

在此处输入图像描述

是否有可能实现这一点,或者是否有任何开源图表库可以做到这一点。

我尝试过的

我已经查找了所有可用的图表库,但没有找到任何合适的选项。既然是起点,就没什么好说的了。

请帮忙。我被困住了。

标签: javascripthighchartshighcharts-ngangular2-highcharts

解决方案


您需要使用wordcloud图表创建和添加单独的容器:

chart: {
    events: {
        load: function() {
            var points = this.series[0].points;

            points.forEach(function(p) {
                var wContainer = $('<div>');

                wContainer.addClass('wordCloudContainer');

                wContainer.css({
                    top: this.plotTop,
                    left: p.plotX
                });

                $('#mainContainer').append(wContainer);

                Highcharts.chart(wContainer[0], {
                    chart: {
                        width: p.pointWidth + 40,
                        height: 200
                    },
                    title: {
                        text: ''
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        type: 'wordcloud',
                        data: [
                            ['one', 1],
                            ['two', 2],
                            ['three', 3]
                        ]
                    }]
                });
            }, this);
        }
    }
}

现场演示:http: //jsfiddle.net/BlackLabel/2jahsfyp/

API 参考: https ://api.highcharts.com/highcharts/chart.events.load


推荐阅读