Chart.js：创建带有叠加和偏移条形图的条形图

Question

我是 Chart.js 的新手，我尝试创建一个图表，其中包含两个数据集和重叠条（未堆叠），并有轻微偏移。

供参考：大致如下：

我创建了一个图表，其中两个条形图彼此完全重叠，但无法创建如图所示具有偏移量的图表。

我当前的代码：

var ctx = document.getElementById('Chart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Orange', 'Green'],
        datasets: [{
            label: 'Vote Share Now',
            data: [25.5,22.7,8.6,5.5],
            backgroundColor: [
                'rgba(250,0,0,0.7)',
                'rgba(0,17,255, 0.7)',
                'rgba(255,155,0, 0.7)',
                'rgba(0,255,9,0.7)'
            ],
            xAxisID: "Now",
        },{
        label: 'Vote Share Then',
        data: [22.5,29.7,10.3,5.3],
        backgroundColor: [
                'rgba(250,0,0,0.2)',
                'rgba(0,17,255,0.2)',
                'rgba(255,115,0,0.2)',
                'rgba(0, 255,9,0.2)'
            ],
            xAxisID: "Then",
        }]
    },
    options:{
        responsive: false,
        legend:{
            onClick: null
        },
         scales: {
            xAxes: [{
                stacked: true,
                id: "Now",
                barThickness: 70,
            },{
                display: false,
                stacked: true,
                id: "Then",
                barThickness: 40,
                type: 'category',
                categoryPercentage: 0.8,
                barPercentage: 0.9,
                gridLines: {
                    offsetGridLines: true
                },
                offset: true
            }],
            yAxes: [{
                stacked: false,
                ticks: {
                    min: 0,
                    max: 50,
                    beginAtZero: true,
                    callback: function(value, index, values){
                        return value + '%';
                    }
                }
            }]
        }
    }
});

Answer 1

Plugin Core API 提供了一系列可用于执行自定义代码的挂钩。您可以使用 afterUpdate 挂钩从第二个数据集中移动（偏移）条形的 x 位置。

请查看下面您修改后的代码。

const offset = 22;
var myChart = new Chart(document.getElementById('Chart'), {
  type: 'bar',
  plugins: [{
    afterUpdate: function(chart) {
      var dataset = chart.config.data.datasets[1];
      for (var i = 0; i < dataset._meta[0].data.length; i++) {
        var model = dataset._meta[0].data[i]._model;
        model.x += offset;
        model.controlPointNextX += offset;
        model.controlPointPreviousX += offset;
      }
    }
  }],
  data: {
    labels: ['Red', 'Blue', 'Orange', 'Green'],
    datasets: [{
      label: 'Vote Share Now',
      data: [25.5, 22.7, 8.6, 5.5],
      backgroundColor: [
        'rgba(250,0,0,0.7)',
        'rgba(0,17,255, 0.7)',
        'rgba(255,155,0, 0.7)',
        'rgba(0,255,9,0.7)'
      ],
      categoryPercentage: 0.8,
      barPercentage: 0.9,
      xAxisID: "Now",
    }, {
      label: 'Vote Share Then',
      data: [22.5, 29.7, 10.3, 5.3],
      backgroundColor: [
        'rgba(250,0,0,0.2)',
        'rgba(0,17,255,0.2)',
        'rgba(255,115,0,0.2)',
        'rgba(0, 255,9,0.2)'
      ],
      categoryPercentage: 0.6,
      barPercentage: 0.6,
      xAxisID: "Then",
    }]
  },
  options: {
    responsive: false,
    legend: {
      onClick: null
    },
    scales: {
      xAxes: [{
          id: "Now",
          gridLines: {
            display: false
          }
        },
        {
          id: "Then",
          offset: true,
          display: false
        }
      ],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50,
          stepSize: 10,
          callback: function(value, index, values) {
            return value + '%';
          }
        }
      }]
    }
  }
});

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

Chart.js：创建带有叠加和偏移条形图的条形图

Chart.js: Creating a Barchart with overlaying and offset Bars

javascript

chart.js

chart.js2