ChartJS уникальные наборы данных на этикетку - PullRequest
Новая
       15

ChartJS уникальные наборы данных на этикетку

0 голосов
/ 10 сентября 2018

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

Моя проблема: Каждый столбец на моем графике должен иметь уникальные значения / метки. Это не должно повторяться на следующем такте ... Что-то сложно объяснить, поэтому я рисую картинку:

enter image description here

Как видите, у каждого бара должны быть свои уникальные данные. Обычно, если у вас есть «Яблоки» на первом баре с некоторым значением, «яблоки» также появятся на втором баре с некоторыми другими значениями ... Но я не хочу этого. Я действительно хочу разделить столбцы, не связанные друг с другом на одном графике.

Есть ли способ достичь этого?

Я пытаюсь с тех пор, как 48 часов и действительно все перепробовал. пробовал с многомерными массивами, «сложенными» опциями, несколькими наборами данных, но, похоже, ничего не работает. Можно ли даже добиться этого с chartJS?

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

Вот код, который я сейчас пытаюсь изменить: 

var ctx = document.getElementById("chart1").getContext('2d');
var labels = ["Data1", "Data2", "Data3"];
var data = {
    "labels": labels,
    "datasets": [{
        "label": "t1",
        "xAxisID": "x-axis-0",
        "data": [29, 19, 26],
        "backgroundColor": 'blue'
    },
    {
        "label": "t1_SUM",
        "xAxisID": "x-axis-0",
        "data": [32, 29, 36],
        "backgroundColor": 'red'
    }]
}

new Chart(ctx, {
    type: "bar",
    data: data,
    options: {
        scales: {
            xAxes: [{
                "stacked": true,
                "id": "x-axis-0"
            },
            {
                "stacked": true,
                "id": "x-axis-1",
            }]
        }
    }
});

Очень ценю любую помощь!

Спасибо.

1 Ответ

0 голосов
/ 10 сентября 2018

Источник: https://www.chartjs.org/samples/latest/charts/bar/stacked.html

Вы можете определить каждый столбец как 1 или более набора данных. Пример: 

datasets: [{
                label: 'Dataset 1',
                backgroundColor: window.chartColors.red,
                data: [
                    randomScalingFactor(),
                    null,
                    null,
                    null,
                    null,
                    null,
                    null
                ]
            }, {
                label: 'Dataset 2',
                backgroundColor: window.chartColors.blue,
                data: [
                    null,
                    randomScalingFactor(),
                    null,
                    null,
                    null,
                    null,
                    null
                ]
            }]


var barChartData = {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'Dataset 1',
				backgroundColor: window.chartColors.red,
				data: [
					randomScalingFactor(),
					null,
					null,
					null,
					null,
					null,
					null
				]
			}, {
				label: 'Dataset 2',
				backgroundColor: window.chartColors.blue,
				data: [
					randomScalingFactor(),
					null,
					null,
					null,
					null,
					null,
					null
				]
			}, {
				label: 'Dataset 3',
				backgroundColor: window.chartColors.green,
				data: [
					null,
					randomScalingFactor(),
					null,
					null,
					null,
					null,
					null
				]
			}, {
				label: 'Dataset 4',
				backgroundColor: window.chartColors.green,
				data: [
					null,
					null,
					randomScalingFactor(),
					null,
					null,
					null,
					null
				]
			}]

		};
			var ctx = document.getElementById('canvas').getContext('2d');
			window.myBar = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				options: {
					title: {
						display: true,
						text: 'Chart.js Bar Chart - Stacked'
					},
					tooltips: {
						callbacks: {
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].label || '';

                    if (label) {
                        label += ': ';
                    }
                    label += Math.round(tooltipItem.yLabel * 100) / 100;
                    return label;
                }
            }
					},
					responsive: true,
					scales: {
						xAxes: [{
							stacked: true,
						}],
						yAxes: [{
							stacked: true
						}]
					}
				}
			});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<script src="https://www.chartjs.org/samples/latest/utils.js"></script>
<div style="width: 100%">
		<canvas id="canvas"></canvas>
</div>
...