Chart.js堆叠和分组horizo​​ntalBar图表

Question

我一直试图在我的网页上显示一些复杂的数据，并选择了chart.js来这样做。 因此，我需要水平分组多个堆叠的条。

我已经找到了这个小提琴＆＃34;正常＆＃34;但是还不能改变它以使用horizo​​ntalBar。

Stackoverflow问题：Chart.js stacked and grouped bar chart

原始小提琴（http://jsfiddle.net/2xjwoLq0/）有

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.bar);

我只是用.horizo​​ntalBar替换代码中的.bar（知道这不会成功）。

Chart.defaults.groupableBar = Chart.helpers.clone(Chart.defaults.horizontalBar);

由于这不起作用，我尝试在此处添加第二个堆叠修改器，如水平条建议： Horizontal stacked bar chart with chart.js并翻转X和Y计算的函数（calculateBarY / calculateBarX）

这非常有用，因为堆栈不会正确地合并到彼此。

http://jsfiddle.net/2xjwoLq0/3/

如果有人能帮我解决这个问题，我将不胜感激。

Answer 1

寻找类似的东西，我看了你给的例子，并决定写点什么。

我没有尝试修复代码或重复使用＆quot; groupableBar＆＃39;，而是从Chart.js获取Chart.controllers.horizontalBar代码并重写函数calculateBarY中的某些部分，{{ 1}}。 只需重复使用示例中的calculateBarHeight函数。

＆＃13;

＆＃13;

getBarCount

＆＃13;

Chart.defaults.groupableHBar = Chart.helpers.clone(Chart.defaults.horizontalBar);

Chart.controllers.groupableHBar = Chart.controllers.horizontalBar.extend({
    calculateBarY: function(index, datasetIndex, ruler) {
        var me = this;
        var meta = me.getMeta();
        var yScale = me.getScaleForId(meta.yAxisID);
        var barIndex = me.getBarIndex(datasetIndex);
        var topTick = yScale.getPixelForValue(null, index, datasetIndex, me.chart.isCombo);
        topTick -= me.chart.isCombo ? (ruler.tickHeight / 2) : 0;
        var stackIndex = this.getMeta().stackIndex;

        if (yScale.options.stacked) {
            if(ruler.datasetCount>1) {
                var spBar=ruler.categorySpacing/ruler.datasetCount;
                var h=me.calculateBarHeight(ruler);
                
                return topTick + (((ruler.categoryHeight - h) / 2)+ruler.categorySpacing-spBar/2)+(h+spBar)*stackIndex;
            }
            return topTick + (ruler.categoryHeight / 2) + ruler.categorySpacing;
        }

        return topTick +
            (ruler.barHeight / 2) +
            ruler.categorySpacing +
            (ruler.barHeight * barIndex) +
            (ruler.barSpacing / 2) +
            (ruler.barSpacing * barIndex);
    },
    calculateBarHeight: function(ruler) {
        var returned=0;
        var me = this;
        var yScale = me.getScaleForId(me.getMeta().yAxisID);
        if (yScale.options.barThickness) {
            returned = yScale.options.barThickness;
        }
        else {
            returned= yScale.options.stacked ? ruler.categoryHeight : ruler.barHeight;
        }
        if(ruler.datasetCount>1) {
            returned=returned/ruler.datasetCount;
        }
        return returned;
    },
    getBarCount: function () {
        var stacks = [];

        // put the stack index in the dataset meta
        Chart.helpers.each(this.chart.data.datasets, function (dataset, datasetIndex) {
            var meta = this.chart.getDatasetMeta(datasetIndex);
            if (meta.bar && this.chart.isDatasetVisible(datasetIndex)) {
                var stackIndex = stacks.indexOf(dataset.stack);
                if (stackIndex === -1) {
                    stackIndex = stacks.length;
                    stacks.push(dataset.stack);
                }
                meta.stackIndex = stackIndex;
            }
        }, this);

        this.getMeta().stacks = stacks;

        return stacks.length;
    }
});




var data = {
  labels: ["January", "February", "March"],
  datasets: [
    {
      label: "Dogs",
      backgroundColor: "rgba(255,0,0,0.2)",
      data: [20, 10, 25],
      stack: 1,
      xAxisID: 'x-axis-0',
      yAxisID: 'y-axis-0'
    },
    {
      label: "Cats",
      backgroundColor: "rgba(255,255,0,0.2)",
      data: [70, 85, 65],
      stack: 1,
      xAxisID: 'x-axis-0',
      yAxisID: 'y-axis-0'
    },
    {
      label: "Birds",
      backgroundColor: "rgba(0,255,255,0.2)",
      data: [10, 5, 10],
      stack: 1,
      xAxisID: 'x-axis-0',
      yAxisID: 'y-axis-0'

    },
    {
      label: ":-)",
      backgroundColor: "rgba(0,255,0,0.2)",
      data: [20, 10, 30],
      stack: 2,
      xAxisID: 'x-axis-1',
      yAxisID: 'y-axis-0'
    },
    {
      label: ":-|",
      backgroundColor: "rgba(0,0,255,0.2)",
      data: [40, 50, 20],
      stack: 2,
      xAxisID: 'x-axis-1',
      yAxisID: 'y-axis-0'
    },
    {
      label: ":-(",
      backgroundColor: "rgba(0,0,0,0.2)",
      data: [60, 20, 20],
      stack: 2,
      xAxisID: 'x-axis-1',
      yAxisID: 'y-axis-0'
    },
  ]
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, {
  type: 'groupableHBar',
  data: data,
  options: {
    scales: {
      yAxes: [{
        stacked: true,
        type: 'category',
        id: 'y-axis-0'
      }],
      xAxes: [{
        stacked: true,
        type: 'linear',
        ticks: {
          beginAtZero:true
        },
        gridLines: {
          display: false,
          drawTicks: true,
        },
        id: 'x-axis-0'
      },
      {
        stacked: true,
        position: 'top',
        type: 'linear',
        ticks: {
          beginAtZero:true
        },
        id: 'x-axis-1',
        gridLines: {
          display: true,
          drawTicks: true,
        },
        display: false
      }]
    }
  }
});

＆＃13;

＆＃13;

＆＃13;

此处还在jsfiddle上添加了示例：https://jsfiddle.net/b7gnron7/4/

代码未经过严格测试，您可能会发现一些错误，尤其是如果您尝试仅显示一个堆叠组（在这种情况下使用horizo​​ntalBar）。

你的帖子有点老......不确定你还需要一个解决方案，但它对其他人有用^ _ ^