Chart.js条形图中的多个条形宽度 [英] Multiple bar widths in Chart.js bar chart

问题描述

是否可以为不同的数据集设置不同的条宽？我在一个堆栈中有几个数据集，在自己的堆栈中有另一个数据集。单个数据集应该比另一个数据集更窄

Is it possible to have different bar widths for different datasets? I have a couple datasets in one stack, and another dataset in its own stack. The single dataset should be narrower than the other stack

实施例的。在这里，我复制了左堆栈，导致它是右堆栈宽度的两倍。这会破坏某些效果，包括非零边框

Example. Here I duplicated the left stack, resulting in it being twice the width of the right stack. This breaks certain effects, including nonzero borders

var data = {
  labels: ["1", "2", "3", "4", "5"],
  datasets: [
    {
      label: "d1",
      backgroundColor: "rgba(182,127,0,1)",
      borderColor: "rgba(117,61,41,1)",
      borderWidth: 1,
      data: [42, 78, 64, 90, 97],
      stack: "s1"
    },
    {
      label: "d2",
      backgroundColor: "rgba(71,161,65,1)",
      borderColor: "rgba(36,93,56,1)",
      borderWidth: 1,
      data: [27, 63, 46, 64, 43],
      stack: "s1"
    },
    {
      label: "d3",
      backgroundColor: "rgba(255,141,106,1)",
      borderColor: "rgba(99,60,32,1)",
      borderWidth: 1,
      data: [18, 50, 23, 83, 35],
      stack: "s1"
    },
    {
      label: "d1",
      backgroundColor: "rgba(182,127,0,1)",
      borderColor: "rgba(117,61,41,1)",
      borderWidth: 1,
      data: [42, 78, 64, 90, 97],
      stack: "s1b"
    },
    {
      label: "d2",
      backgroundColor: "rgba(71,161,65,1)",
      borderColor: "rgba(36,93,56,1)",
      borderWidth: 1,
      data: [27, 63, 46, 64, 43],
      stack: "s1b"
    },
    {
      label: "d3",
      backgroundColor: "rgba(255,141,106,1)",
      borderColor: "rgba(99,60,32,1)",
      borderWidth: 1,
      data: [18, 50, 23, 83, 35],
      stack: "s1b"
    },
    {
      label: "d4",
      backgroundColor: "rgba(160,160,160,1)",
      borderColor: "rgba(60,60,60,1)",
      borderWidth: 1,
      data: [152, 141, 170, 194, 128],
      stack: "s2",
      barPercentage: 0.3
    }
  ]
};
var options = {
  scales: {
    xAxes: [{
      categoryPercentage: 0.6,
      barPercentage: 1
    }]
  },
  legend: {
    display: false
  }
};

var barChart = new Chart($("#myChart"), {
  type: 'bar',
  data: data,
  options: options
});

推荐答案

这实际上可以在chart.js中执行，但解决方案有点hackish。它的要点是你可以创建第二个x轴刻度并将 barThickness 属性设置为小于另一个轴的值​​。然后将数据集分配给此访问权限，最后将比例显示设置为false。

This actually is possible to do in chart.js, but the solution is a bit "hackish". The gist of it is that you can create a 2nd x axis scale and set the barThickness property to a value smaller than your other axis. Then you assign your dataset to this access and finally, set the scale display to false.

您最终得到1轴上的一些数据集和另一个隐藏轴上的另一个数据集。其他一切仍然有效（没有你在问题中提到的破坏效果）。

You end up with some datasets on 1 axis and another dataset on a different hidden axis. Everything else still works (no breaking effects like you mentioned in your question).

以下是您的选择。

var options = {
  scales: {
    xAxes: [{
      categoryPercentage: 0.6,
      barPercentage: 1,
    }, {
      id: 'x-axis-2',
      type: 'category',
      display: false,
      categoryPercentage: 0.6,
      barPercentage: 1,
      barThickness: 20,
      gridLines: {
        offsetGridLines: true
      }
    }],
  },
  legend: {
    display: false
  }
};

你必须确保添加 xAxisID：'x-axis-2 '指向要绑定到新轴的数据集。

You have to make sure you add xAxisID: 'x-axis-2' to whichever dataset you want to bind to the new axis.

这是 codepen示例展示了所有这些。

您甚至可以为水平条形图执行此操作通过改变周围的尺度。请参阅此 codepen示例，以显示此信息。

You can even do this for a horizontal bar chart by changing the scales around. See this codepen example showing this.

这篇关于Chart.js条形图中的多个条形宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！