每个标签的 ChartJS 唯一数据集

Question

我遇到了一个问题，但找不到解决方案。我正在尝试使用 chartJS 创建堆积条形图。没有什么比这更复杂了。

我的问题：我图表上的每个条形图都应该有唯一的值/标签。这些不应该在下一个酒吧重复......解释起来有点复杂，所以我画了一张图：

如您所见，每个柱都应该有其独特的数据。通常，如果您在第一个栏上有 "Apples" 和一些值，"apples" 也会在第二个栏上出现一些其他值......但我不希望那样。我真的想要分开的条形图，在一张图中彼此不相关。

有办法实现吗？

我尝试了大约 48 小时，真的什么都试过了。尝试使用多维数组、"stacked" 选项、多个数据集，但似乎没有任何效果。有没有可能用 chartJS 实现这个？

我将 post 我当前的代码（请注意，这只是我尝试过的大约 50 种不同内容的一个版本...但我认为 post 简单的代码可能会更好我目前拥有的代码，因为另一个失败对任何事情都没有帮助...)

这是我目前正在尝试修改的代码：

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>

每个标签的 ChartJS 唯一数据集

ChartJS unique datasets per label

javascript

chart.js

chartjs-2.6.0