代码之家 › 专栏 › 技术社区 › Antony

横条的水平重叠,而不是整个图形

chart.js

0

Antony · 技术社区 · 6 年前

我被要求创建一个类似于上面的条形图,我想知道它是否可能在图表.js??我看过很多网站(比如 Overlapping Bar Chart using Chart.js 和 https://github.com/chartjs/Chart.js/issues/5224 )但是有一个想法是有两个图形直接在彼此后面-我需要能够设置块的位置(也就是说,几乎可以像 margin-left:-5px 正如我在CSS中所做的那样),或者至少有一些重叠(或者大约40%的重叠)。如果不是的话,我可能不得不用CSS来构建它,但是使用chartjs会很棒。

0 回复 | 直到 6 年前

1

uminder 6 年前

这个 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 这提供了一个稍微改进的解决方案。