条形图的水平重叠，不是整个图形 [英] Horizontal overlapping of bars, not whole graph

问题描述

我被要求创建类似于上面的条形图，我想知道是否有可能在chart.js中？我看过许多网站（例如使用Chart.js重叠条形图和 https://github.com/chartjs/Chart.js/issues / 5224 ），但是我们的想法是直接有两个相互靠拢的图形-我需要能够设置块的位置（即几乎走到 margin-left之类的地方：- 5px ，或者至少有一些重叠（或大约40％重叠）。如果不是这样，我可能必须在CSS中构建它，但是使用Chart JS会很棒。

I have been asked to create a bar graph similar to the above and I want to know if it is possible within chart.js?? I have had a look at a number of sites (such as Overlapping Bar Chart using Chart.js and https://github.com/chartjs/Chart.js/issues/5224) but the idea there is to have two graphs behind each other directly - I need to be able to set the position of the blocks (i.e. almost go something like margin-left:-5px as I would in CSS) - or at least have some overlap (or about 40% overlap). If not I might have to build it in CSS but it would be great to use Chart JS.

推荐答案

插件核心API 提供了一系列可以使用的钩子用于执行自定义代码。您可以使用 afterUpdate 钩子将单个数据集的条形移动所需的像素数，如下所示：

The Plugin Core API offers a range of hooks that may be used for performing custom code. You can use the afterUpdate hook to shift the bars of individual datasets by the desired number of pixels as follows:

afterUpdate: function(chart) {
  let datasets = chart.config.data.datasets;
  for (let iDs = 1; iDs < datasets.length; iDs++) {
    let dataset = datasets[iDs];
    for (var i = 0; i < dataset._meta[0].data.length; i++) {
      let model = dataset._meta[0].data[i]._model;
      model.x += iDs * offset;
      model.controlPointNextX += iDs * offset;
      model.controlPointPreviousX += iDs * offset;
    }
  }
}

请在下面的可运行代码段中查看和

Please take a look at below runnable code snippet and see how it works.

const offset = 12;

new Chart('myChart', {
  type: 'bar',
  plugins: [{
    afterUpdate: function(chart) {
      let datasets = chart.config.data.datasets;
      for (let iDs = 1; iDs < datasets.length; iDs++) {
        let dataset = datasets[iDs];
        for (var i = 0; i < dataset._meta[0].data.length; i++) {
          let model = dataset._meta[0].data[i]._model;
          model.x += iDs * offset;
          model.controlPointNextX += iDs * offset;
          model.controlPointPreviousX += iDs * offset;
        }
      }
    }
  }],
  data: {
    labels: ["A"],
    datasets: [{
        label: 'X',
        backgroundColor: 'orange',
        borderWidth: 1,
        data: [5],
        xAxisID: "bar-x-axis1",
        barThickness: 30,
      },
      {
        label: 'Y',
        backgroundColor: 'red',
        data: [10],
        xAxisID: "bar-x-axis2",
        barThickness: 30,
      },
      {
        label: 'Z',
        backgroundColor: 'lightblue',
        data: [15],
        xAxisID: "bar-x-axis3",
        barThickness: 30,
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    scales: {
      xAxes: [{
          id: "bar-x-axis3",
          display: false
        },
        {
          id: "bar-x-axis2",
          offset: true,
          display: false
        },
        {
          id: "bar-x-axis1",
          offset: true,
          ticks: {
            display: false
          }
        }
      ],
      yAxes: [{
        id: "bar-y-axis1",
        ticks: {
          beginAtZero: true,
          stepSize: 5
        }
      }]
    }
  }
});

canvas {
  max-width: 120px;
}

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

更新

也请选中此答案，它提供了稍微改进的解决方案。

Please also check this answer that provides a slightly improved solution.

这篇关于条形图的水平重叠，不是整个图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！