在条形图中堆叠分组的 xAxes答案

【问题标题】：Stack grouped xAxes in bar chart在条形图中堆叠分组的 xAxes
【发布时间】：2018-09-07 00:53:31
【问题描述】：

我正在使用 Chart.js 2.7.0，我想按 xAxes 堆叠条形图，但按类型分组。

假设我有这样的事情：

我想将值 49 和 59 堆叠在一个条中，并将 29 和 32 堆叠在一起。

当我使用堆叠的选项时，它会堆叠所有内容... 变成：

当我尝试将 xAxisID 添加到数据集时，ID 为 x-axis-1 的第二个数据集被隐藏并且根本不可见。 X 轴看起来像是重复的... 看sn-p就知道了。

 var ctx = document.getElementById("chart1").getContext('2d');
 var ctx2 = document.getElementById("chart2").getContext('2d');
 var labels = [
      "2018_4",
      "2018_5",
      "2018_6",
      "2018_7",
      "2018_8",
      "2018_9",
      "2018_10",
      "2018_11",
    ];
 var data = {
    "labels": labels,
    "datasets": [
    {
      "label": "t1",
       xAxisID: "x-axis-0",
      "data": [
       29,19,26,28,20,21,11
      ],
      backgroundColor: 'blue'
    },
    {
      "label": "t1_SUM",
       xAxisID: "x-axis-0",
      "data": [
       32,29,36,38,30,31,31
      ],
      backgroundColor: 'red'
    },
    {
      "label": "t2",
      xAxisID: "x-axis-1",
      "data": [
      49,37,39,40,15,34,36,52
      ],
      backgroundColor: 'blue'
    },
     {
      "label": "t2_SUM",
      xAxisID: "x-axis-1",
      "data": [
      59,47,49,50,25,44,46,62
      ],
      backgroundColor: 'red'
    }
    ]
  };
  new Chart(ctx, {
  type: "bar",
  data: data,
  options: {
    scales: {
      xAxes: 
      [
      {
       stacked: true,
       id: "x-axis-0",
      },
       {
       stacked: true,
       id: "x-axis-1",
      }
      ],
    }
  }});
  
   var data2 = {
    "labels": labels,
    "datasets": [
    {
      "label": "t1",
      "data": [
       29,19,26,28,20,21,11
      ],
      backgroundColor: 'blue'
    },
    {
      "label": "t1_SUM",
      "data": [
       32,29,36,38,30,31,31
      ],
      backgroundColor: 'red'
    },
    {
      "label": "t2",
      "data": [
      49,37,39,40,15,34,36,52
      ],
      backgroundColor: 'blue'
    },
     {
      "label": "t2_SUM",
      "data": [
      59,47,49,50,25,44,46,62
      ],
      backgroundColor: 'red'
    }
    ]
  };
  
   new Chart(ctx2, {
  type: "bar",
  data: data2,
  options: {
    scales: {
      xAxes: 
      [
      {
       stacked: false,
      }
      ],
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="chart1"></canvas>
<canvas id="chart2"></canvas>
<canvas id="chart3"></canvas>

我想从这个 sn-p 连接

t1 和 t1_SUM
t2 和 t2_SUM

【问题讨论】：

标签： javascript chart.js chart.js2

【解决方案1】：

好的，

我误读了文档。我应该在数据集中使用堆栈选项，然后它就可以工作了。给您添麻烦了……

【讨论】：