Горизонтальная гистограмма длительности графика

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)