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

Я пытаюсь понять, как подойти к рисованию этой диаграммы. Это похоже на горизонтальную гистограмму с накоплением, но у меня проблемы с определением формата набора данных для интервалов продолжительности. Я до сих пор не нашел правильного способа структурировать источник данных для достижения этого результата.

Другим вариантом может быть линейная / точечная диаграмма. И последний - это написание пользовательского плагина и рисование его на холсте вручную, форма за формой. Но я бы хотел этого избежать :)

Любая идея была бы действительно полезной. Спасибо!

введите здесь описание изображения


chart.js vue-chartjs chartjs-2.6.0
person Oddomir    schedule 30.10.2018    source источник
comment
Пора перейти на amcharts.com/demos/gantt-chart   -  person Aroon    schedule 30.10.2018
comment
Спасибо за совет @Aroon! Этот выглядит еще лучше. Отмечено для использования в будущем. Однако есть несколько причин, по которым на данный момент это должен быть Chart.js. Пожалуйста, поделитесь, если у вас есть идея или фрагмент, который решает эту проблему, даже частично, было бы здорово.   -  person Oddomir    schedule 30.10.2018
comment
Возможный дубликат: stackoverflow.com/questions/41259441/   -  person John Go-Soco    schedule 30.10.2018
comment
На самом деле, это очень хорошая идея @ JohnGo-Soco! Я только что узнал, что эта диаграмма называется диаграммой Ганта :) Спасибо!   -  person Oddomir    schedule 31.10.2018
comment
Небольшой совет - вы можете использовать «линейную» диаграмму, и когда вы определяете параметры конфигурации набора данных, установите для spanGaps значение false. Таким образом, вы можете использовать значения NaN, чтобы получить разрыв между двумя несмежными частями данных.   -  person John Go-Soco    schedule 31.10.2018
comment
Да, это правильный подход. Я решил пойти с другим форматом массива данных ([{ x:10, y: 20}, {x: 15, y: 10},...]). При таком подходе каждая строка представляет собой отдельный набор данных с двумя точками, определяющими дату начала и дату окончания.   -  person Oddomir    schedule 01.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел способ решить эту проблему с помощью @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)
person Oddomir    schedule 01.11.2018