每个标签的ChartJS唯一数据集

Question

我正坐在这里解决问题，但找不到解决方案。我正在尝试使用chartJS创建堆积的条形图。没什么复杂的。

我的问题： 我的图表上的每个条形图都应具有唯一的值/标签。这些不应该在下一个栏上重复... Kinda很难解释，这就是为什么我要画一幅画：

如您所见，每个条形图应具有其唯一的数据。通常，如果您在第一栏上具有一些值的“ Apples”，那么在第二栏中上也会出现一些其他值的“ apples” ...但是我不希望这样。我真的想要分隔的条形，在一张图中彼此不相关。

有没有办法做到这一点？

自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",
            }]
        }
    }
});

非常感谢您的帮助！

谢谢。

Answer 1

来源：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>