Question

我需要根据附加的图像将条形图中的条形图堆叠在左侧

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

编辑：

只是为了澄清我在寻找什么。我的图表中的条形图数是动态的，如果有10个条形图然后图表看起来很好但是如果只有2条它们各自占据图表宽度的50％（见图2）

我希望这两个条的宽度完全相同，就好像它们中的10个并且堆叠在左边一样。

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

感谢。

Answer 1

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

Answer 2

不是使用10个空条形图创建图形，而是使用您的值填充它，我认为最好添加空值以达到10（同样的想法，但）。

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

<小时/> 现在，您必须知道图表对象包含大量信息：

如果您要修改全局选项，请选中chart.config.options
如果您要修改特定图表，请选中chart.config.data

在我们的案例中，我们需要data属性如果你深入研究它，你会发现值的数量来自data.labels和data.datasets[ n {{1}的长度（ n 是 n 数据集）。

<小时/> 既然您知道要做什么，如何做到这一点，您就可以做到。

我仍然快速举例说明你在寻找什么：

].data

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

Chart.js：将条形图堆叠在左侧

2 个答案: