Chartjs 持续时间水平条形图答案

【问题标题】：Chartjs duration horizontal bar chartChartjs 持续时间水平条形图
【发布时间】：2018-10-30 11:02:11
【问题描述】：

我正在尝试弄清楚如何绘制此图表。它看起来像一个堆叠的水平条形图，但我在为持续时间间隔定义数据集格式时遇到了麻烦。我仍然没有找到构建数据源以实现此结果的正确方法。

另一个选项可能是折线图/散点图。最后一个是编写自定义插件并手动将其绘制在画布上，逐个形状。不过我想避免这种情况:)

任何想法都会很有帮助。谢谢！

【问题讨论】：

切换时间amcharts.com/demos/gantt-chart
感谢@Aroon 的建议！ This one 看起来更好。留作日后参考。然而，目前它必须是 Chart.js 有几个原因。如果您有解决此问题的想法或 sn-p，请分享，即使是部分解决也很好。
可能重复：stackoverflow.com/questions/41259441/…
实际上是非常好的领导@JohnGo-Soco！刚知道这张图叫甘特图：）谢谢！
一些建议 - 您可以使用“折线”图表，并在定义数据集配置选项时，将 spanGaps 设置为 false。这样，您可以使用 NaN 值来获取数据的两个不连续部分之间的差距。

标签： chart.js chartjs-2.6.0 vue-chartjs

【解决方案1】：

在@John Go-Soco 的帮助下，我找到了解决这个问题的方法。图配置的一些非常关键的部分如下所示。简而言之，每一行都是一个单独的数据集，其中包含定义开始日期和结束日期的两个数据点。

const yMap = [ 'amlodipine', 'simvastatin', 'lisinopril' ];

const mapDataPoint = function(xValue, yValue) {
                       return {
                          x: xValue,
                          y: yMap.indexOf(yValue)
                       };
                     };

const config = {
                type: 'line',
                data: {
                    datasets: [
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2007', 'simvastatin'),
                                mapDataPoint('6/1/2010', 'simvastatin'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('9/1/2010', 'simvastatin'),
                                mapDataPoint('11/1/2018', 'simvastatin'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2007', 'lisinopril'),
                                mapDataPoint('9/1/2015', 'lisinopril'),
                            ]
                        },
                        {
                            //other dataset config options here
                            data: [
                                mapDataPoint('1/1/2014', 'amlodipine'),
                                mapDataPoint('11/1/2022', 'amlodipine'),
                            ]
                        },
                    ]
                },
                options: {
                    //other chart config options here
                    scales: {
                        xAxes: [
                            {
                                type: 'time',
                                time: {
                                    unit: 'year',
                                    round: 'day',
                                    displayFormats: {
                                        year: 'YYYY'
                                    },
                                    min: moment('2006', 'YYYY'),
                                    max: moment('2019', 'YYYY')
                                },

                            }
                        ],
                        yAxes: [
                            {
                                 ticks: {
                                    min: -1,
                                    max: yMap.length,
                                    //setting custom labels on the Y-axes
                                    callback: function(value) {
                                        return yMap[ value ];
                                    }
                                }
                            }
                        ]
                    }
                },

            };

const ctx = 'reference to your ctx here';

const chart = new Chart(ctx, config)

【讨论】：