Jquery 如何使用chart.JS创建堆叠条形图/水平图？

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

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

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

更新 我将答案标记为正确，因为它显然是基于JSFIDLE的。但我一直无法将数据放入堆栈。这就是我所看到的：

这是我的密码：

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
};

…还有这个（系安全带和吊带）：

更新3 这很管用（我不得不去掉其中一个选项）：

如果要创建水平条而不是常规字符，可以使用

键入：'horizontalBar'

要将图表创建为“堆叠条”，您需要设置

您可以使用以下代码：

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);

下面是一个工作示例：

---

（由于某些原因，它在这么小的代码段中不起作用，所以我使用了JSFIDLE）。

已经这样做了——我总是对每个答案投赞成票，除非他们不礼貌。我也会尽快给这个奖-花两天时间，然后再花一天的时间来颁奖。哇！提前感谢：）不幸的是，这是不可计数的，显然是因为它已被标记为复制品；如果你觉得被骗了，很抱歉。没关系：）如果你愿意，欢迎你赏赐我的其他一些答案（如果你觉得有用，请投1票或2票）。

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

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);