Question

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

Answer 1

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

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

请查看下面的可运行代码段，并查看其工作原理。

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>

更新

还请选中此answer，它会提供稍微改进的解决方案。

条形图的水平重叠，不是整个图形

1 个答案: