Сгруппированные гистограммы с пересекающимися галочками - PullRequest
Новая
       9

Сгруппированные гистограммы с пересекающимися галочками

0 голосов
/ 15 апреля 2020

В настоящее время я работаю над графиком, который показывает 4 различных набора данных, два из них представлены столбцами, а два других представлены точками данных на этих столбцах.

Я пытаюсь показать галочку "отметки на полосе, где точки данных представляют пересечение точки данных с данными столбца, однако, самое близкое, что я могу получить к этому, это наличие 4 комбинированных диаграмм из 2 гистограмм и 2 линейных диаграмм без линий и использование pointStyle линии. Однако это не то, чего хочет или ожидает клиент.

Я пробовал несколько решений для этого (включая использование гистограмм со скрытыми границами и т. Д. c) безрезультатно.

Я приложил скриншот того, как выглядит текущее «решение». Как вы можете видеть, линии go по всей категории, когда они должны просто представлять, где они находятся на панели (будь то внутри панели или над ней).

График JS способен отображать точка на гистограмме, которая представляет эти данные, когда они сгруппированы, как на скриншоте?

Текущее представление:

enter image description here

Что я хотел бы показать, что показано (и обведено ниже): enter image description here

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

var chartData = {
            labels: ['Apr 2019', 'May 2019', 'Jun 2019'],
            datasets: [{
                label: 'Withdrawn',
                backgroundColor: 'rgba(0, 0, 0, 1)',
                borderColor: 'rgba(0, 0, 0, 1)',
                type: 'line',
                pointRadius: 10,
                pointHoverRadius: 15,
                showLine: false,
                data: [2543, 2501, 2401],
                yAxisID: 'y-axis-1',
                pointStyle: 'line'
            },
            {
                label: 'Ongoing',
                backgroundColor: 'rgba(0, 0, 0, 1)',
                borderColor: 'rgba(0, 0, 0, 1)',
                type: 'line',
                pointRadius: 10,
                pointHoverRadius: 15,
                showLine: false,
                data: [1755, 2122, 2298],
                yAxisID: 'y-axis-1',
                pointStyle: 'line'
            },
            {
                label: 'In Progress',
                backgroundColor: 'rgba(94, 131, 186, 0.9)',
                borderColor: 'rgba(94, 131, 186, 0.9)',
                borderWidth: 1,
                data: [2400, 2402, 2100],
                yAxisID: 'y-axis-1'
            },
            {
                label: 'Cancelled',
                backgroundColor: 'rgba(116, 162, 231, 0.9)',
                borderColor: 'rgba(116, 162, 231, 0.9)',
                borderWidth: 1,
                data: [2410, 2222, 1704],
                yAxisID: 'y-axis-1'
            }]                
        };

        var chart = new Chart(context, {
            type: 'bar',
            data: chartData,
            options: {
                layout: {
                    padding: {
                        top: 15
                    }
                },
                responsive: true,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        position: 'left',
                        id: 'y-axis-1',
                        ticks: {
                            stepSize: 100
                        }
                    }]
                }
            }
        });

1 Ответ

0 голосов
/ 22 апреля 2020

Было рекомендовано использовать плавающие бары, что, похоже, решило мою проблему. 

var chart = new Chart(ctx, {
    type: "bar",
    data: {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
        {
            backgroundColor: "rgb(255, 99, 132, 0.5)",
            borderColor: "rgb(255, 99, 132)",
            data: [10, 7, 9, 5, 8, 3, 4, 2, 1, 1],
            stack: '1'
        },
        {
           backgroundColor: "rgb(75, 192, 192, 0.5)",
           borderColor: "rgb(75, 192, 192)",
           data: [11, 10, 9, 8, 7, 6, 5, 4, 3, 2],
           stack: '2'
        },
        {
           backgroundColor: 'black',
           data: [[11,11.1], [6,6.1]],
           stack: '1'
        },
        {
           backgroundColor: 'brown',
           data: [[9,9.1], [5,5.1]],
           stack: '2'
        }
        ]
   },
   options: {
       scales: {
           y: {
                stacked: false
           }
       }
   }
});

https://codepen.io/kurkle/pen/BaoQdLN?editors=1010

...