javascript - 如何使用chart js绘制如下所示的图表

Question

我想画一个如下图所示的图表。我的项目中已经有图表 JS 库，因此我可以使用图表 JS 绘制此图表

请告诉我如何绘制此图。如果图表 js 无法实现，请推荐一些其他库

Answer 1

您可以将 Highcharts-ng 与 angular 一起使用，它具有甘特图功能

var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container'
            },

            title: {
                text: 'SOTMP Checklist Compliance History'
            },

            xAxis: {
                type: 'datetime'
            },

            yAxis: {

                categories: ['Category 9',
                             'Category 8',
                             'Category 7',
                             'Category 6',
                             'Category 5',
                             'Category 4',
                             'Category 3',
                             'Category 2',
                             'Category 1'],
                tickInterval: 1,            
                tickPixelInterval: 200,
                labels: {
                    style: {
                        color: '#525151',
                        font: '12px Helvetica',
                        fontWeight: 'bold'
                    },
                   /* formatter: function() {
                        if (tasks[this.value]) {
                            return tasks[this.value].name;
                        }
                    }*/
                },
                startOnTick: false,
                endOnTick: false,
                title: {
                    text: 'Criteria'
                },
                minPadding: 0.2,
                maxPadding: 0.2,
                   fontSize:'15px'

            },

            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ tasks[this.y].name + '</b><br/>' +
                        Highcharts.dateFormat('%m-%d-%Y', this.point.options.from)  +
                        ' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to); 
                }
            },

            plotOptions: {
                line: {
                    lineWidth: 10,
                    marker: {
                        enabled: false
                    },
                    dataLabels: {
                        enabled: true,
                        align: 'left',
                        formatter: function() {
                            return this.point.options && this.point.options.label;
                        }
                    }
                }
            },

            series: series

        });        

<强> DEMO