Question

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

另一个选项可以是折线/散点图。最后一个是编写自定义插件，然后将其手动绘制在画布上，形状各异。我想避免这种情况：）

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

Answer 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)

Chartjs持续时间水平条形图

1 个答案: