如何使用图表js绘制如下图表答案

【问题标题】：How to draw a chart like below using chart js如何使用图表js绘制如下图表
【发布时间】：2017-01-09 05:31:19
【问题描述】：

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

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

【问题讨论】：

我使用 highchart.js 做了类似的事情
@mox 你可以通过小提琴分享吗
你可以看看我几个月前问过的这个问题。也许您可以使该解决方案适应 urs。 stackoverflow.com/questions/35197463/…
@Mox highcharts 不是开源的。你能推荐一些开源的吗？
什么是水平刻度？是24小时的范围吗？图表的最左边部分（例如第二个绿色条的左边缘）是否应该是 00:00 而图表的最右边部分（例如第三/第四/第五个黄色条的右边缘）应该是 24几小时后？ 3个白色间隙（下降）应该是06:00、12:00、18:00吗？

标签： javascript jquery angularjs charts chart.js

【解决方案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

【讨论】：

highcharts 不是开源的。你能推荐一些开源的吗？
你可能必须写一个指令，否则你可以使用库 angular-gant