Javascript 如何使用chart js绘制如下图表

我想画一个如下图。我的项目中已经有了ChartJS库，所以我可以使用ChartJS绘制这个图

---

请告诉我如何画这张图。如果无法使用图表js，请建议使用其他库

您可以使用具有甘特图功能的带角度的Highcharts ng

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

        });        

var图表=新的Highcharts.图表({
图表：{
renderTo:“容器”
},
标题：{
文本：“SOTMP清单合规历史记录”
},
xAxis：{
键入：“日期时间”
},
亚克斯：{
类别：[“第9类”，
"第八类",，
"第七类",，
"第六类",，
"第五类",，
"第四类",，
"第三类",，
"第二类",，
“第1类”]，
时间间隔：1，
像素间隔：200，
标签：{
风格：{
颜色：'#525151'，
字体：“12px Helvetica”，
fontWeight:“粗体”
},
/*格式化程序：函数（）{
if（任务[this.value]）{
返回任务[this.value].name；
}
}*/
},
startOnTick：错，
恩东蒂克：错，
标题：{
文本：“标准”
},
最小填充：0.2，
最大填充：0.2，
字体大小：'15px'
},
图例：{
已启用：false
},
工具提示：{
格式化程序：函数（）{
返回“”+任务[this.y].name+'
+
Highcharts.dateFormat（“%m-%d-%Y”，this.point.options.from）+
“-”+Highcharts.dateFormat（“%m-%d-%Y”，this.point.options.to）；
}
},
打印选项：{
行：{
线宽：10，
标记：{
已启用：false
},
数据标签：{
启用：对，
对齐：“左”，
格式化程序：函数（）{
返回this.point.options&&this.point.options.label；
}
}
}
},
系列：系列
});        

---

我使用highchart做过类似的事情。js@mox你能通过Fiddle分享吗？你可以看看我几个月前问过的这个问题。也许你可以根据urs调整该解决方案@Mox highcharts不是一个开源软件。你能推荐一些开源软件吗？横向规模是多少？是24小时的吗？图表最左边的部分（例如第二个绿色条的左边缘）是否应该是00:00，图表最右边的部分（例如第三个/第四个/第五个黄色条的右边缘）是否应该是24小时后？3个白色的间隔（向下）应该是06:00、12:00、18:00吗？highcharts不是开源的。您能推荐一些开源软件吗？您可能需要编写一个指令，否则您可以使用库angular gant