Уникальные наборы данных chartjs для каждой метки

Я сижу здесь над проблемой и не могу ее решить. Я пытаюсь создать гистограмму с накоплением с помощью 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",
            }]
        }
    }
});

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

Спасибо.

2
0
4 153
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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>

Вы должны добавить ссылку на оригинальный источник кода.

timclutton 10.09.2018 11:45

@HoangHieu Спасибо за ваш ответ, который решил мою проблему. Проголосовали и приняли. Думаю, за Timclutton проголосовали против из-за отсутствия источника, может он уберет свой голос против, когда вы его добавили. :)

Twinfriends 10.09.2018 11:51

Резкая реакция на явный плагиат. Когда вы обновили свой пост, я отозвал свой голос против. Спасибо, что отредактировали свой ответ.

timclutton 10.09.2018 11:52

Другие вопросы по теме