如何使用 Chart.JS 创建堆积条形图/水平图？ [复制]答案

【问题标题】：How is it possible to create a stacked bar / horizontal chart with Chart.JS? [duplicate]如何使用 Chart.JS 创建堆积条形图/水平图？ [复制]
【发布时间】：2016-09-20 17:13:30
【问题描述】：

我可以使用 Chart.JS 创建一个“传统”条形图，甚至可以创建一个如下所示的堆叠条形图：

但我需要创建一个显示水平而不是垂直的条形，并在底部显示百分比，如下所示使用 xlsxwriter 创建的this example：

如何操纵 Chart.JS 来执行这种顺序的魔法？

更新

我将答案标记为正确，因为它显然有效，基于 jsfiddle。但是我无法将数据堆叠起来。这是我看到的：

这是我的代码：

var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d");
var barChartData = {
    labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
    datasets: [
        {
            label: "Price Compliant",
            backgroundColor: "rgba(34,139,34,0.5)",
            hoverBackgroundColor: "rgba(34,139,34,1)",
            data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
        },
        {
            label: "Non-Compliant",
            backgroundColor: "rgba(255, 0, 0, 0.5)",
            hoverBackgroundColor: "rgba(255, 0, 0, 1)",
            data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
        }
    ]
}

var optionsBar = {
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
};

var priceBarChart = new Chart(ctxBarChart, {
    type: 'horizontalBar',
    data: barChartData,
    options: optionsBar
});

我做错了什么？

注意：我也试过这个：

var optionsBar = {
    stacked: true
};

...还有这个（系腰带和吊带）：

var optionsBar = {
    stacked: true,
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
};

更新 3

这行得通（我不得不去掉其中一个选项）：

var optionsBar = {
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
};

【问题讨论】：

已经这样做了 - 我总是对每个答案都投赞成票，除非他们是无礼的。我也会尽快奖励这个 - 需要 2 天，然后再过一天才能获得奖励。
哇！在此先感谢:)
不幸的是，这是无法证明的，显然是因为它已被标记为欺骗；对不起，如果你觉得被骗了。
没关系 :) 如果您愿意，欢迎您赏金我的其他一些答案（如果您觉得有用，请投票 1 或 2）。

标签： jquery html css charts chart.js2

【解决方案1】：

如果要创建水平条而不是常规字符，可以使用 type: 'horizontalBar'。
要将图表创建为“堆积条形”，您需要设置

xAxes: [{
    stacked: true
}],
yAxes: [{
    stacked: true
}]

您可以使用此代码：

var config = {
  type: 'horizontalBar',
  data: {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [{
      label: "Dataset 1",
      backgroundColor: "rgba(154,178,96,0.5)",
      hoverBackgroundColor: "rgba(154,178,96,1)",
      data: [10, 15, 5, 81, 55],
    }, {
      label: "Dataset 2",
      backgroundColor: "rgba(197,213,167,0.5)",
      hoverBackgroundColor: "rgba(197,213,167,1)",
      data: [90, 85, 95, 19, 45]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

这是一个工作示例：
https://jsfiddle.net/0xLxum4s/

（由于某种原因它在 sn-p 中不起作用，所以我使用了 jsfiddle）。

【讨论】：