Chart.js：将条形堆叠到左侧答案

【问题标题】：Chart.js: stack the bars to the leftChart.js：将条形堆叠到左侧
【发布时间】：2016-08-24 21:36:53
【问题描述】：

我需要按照所附图片将条形图中的条形堆叠到左侧

有没有办法在 chart.js 中做到这一点？

编辑：

只是为了澄清我在寻找什么。我图表中的条形数量是动态的，如果有 10 个，那么图表看起来不错，但如果只有 2 个，它们每个占据图表宽度的 50%（见图 #2）

我希望这两个条的宽度与有 10 个条的宽度完全相同，并堆叠在左侧。

我目前正在考虑的一个选项是添加（10 - 没有条形）值为 0 的条形，以便它们不可见。但我希望有更好的解决方案。

谢谢。

【问题讨论】：

你的意思是chartjs.org/docs/#bar-chart？
是的，就是这个。

标签： javascript chart.js

【解决方案1】：

与其创建一个包含 10 个空条形图的图表，然后用您的值填充它，我认为添加空值以达到 10 的数量会更好（同样的想法）。

如果您查看 Chart.js 文档，您可以看到 you can create plugins 用于您的图表和图形。插件在编辑图表时非常有用（而不仅仅是硬编码您想要的内容），因为它们允许您在创建图表时处理正在发生的事情。
例如：beforeUpdate、afterDraw 是您可以使用插件处理的一些事件。

现在，您必须知道图表对象包含很多信息：

如果你想编辑一个全局选项，你会检查chart.config.options
如果你想编辑一个特定的图表，你会检查chart.config.data

在我们的例子中，我们需要data 属性。
如果您深入了解它，您会发现值的数量来自data.labels 和data.datasets[n].data 的长度（n 是第 n 个数据集）。

既然您知道做什么 以及如何去做，那么您就可以去做了。

我仍然做了一个简单的例子来说明你在寻找什么：

var ctx = document.getElementById("myChart").getContext("2d");

// stores the number of bars you have at the beginning.
var length = -1;

// creates a new plugin
Chart.pluginService.register({

  // before the update ..
  beforeUpdate: function(chart) {
    var data = chart.config.data;
    for (var i = data.labels.length; i < data.maxBarNumber; i++) {
      length = (length == -1) ? i : length;
      // populates both arrays with default values, you can put anything though
      data.labels[i] = i;
      data.datasets[0].data[i] = 0;
    }
  },

  // after the update ..
  afterUpdate: function(chart) {
    console.log(chart);
    var data = chart.config.data;
    if (length == -1) return;

    // prevents new charts to be drawn
    for (var i = length; i < data.maxBarNumber; i++) {
      data.datasets[0]._meta[0].data[i].draw = function() {
        return
      };
    }
  }
});

var data = {

  // change here depending on how many bar charts you can have
  maxBarNumber: 10,
  labels: [1, 2, 3, 4, 5, 6, 7],
  datasets: [{
    label: "dataset",
    backgroundColor: 'rgba(255, 99, 132, 0.2)',
    borderColor: 'rgba(255,99,132,1)',
    borderWidth: 1,
    data: [65, 59, 80, 81, 56, 55, 40],
  }]
};

var myBarChart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    scales: {
      xAxes: [{
        display: false
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

【讨论】：

感谢您的回复！这就是我添加 (10 - no of bars) 空值的意思。这读取 10 减去条数。对不起，如果我不够清楚。这是迄今为止最好的答案，所以我将其标记为解决方案。干杯！

【解决方案2】：

如果数据当前堆叠在右侧，您可以使用Array.prototype.reverse() 反转数据。否则，您将需要使用某种类型的排序来从最大数据到最小数据。

【讨论】：