使用chartjs的多条图中的每个条的子类别

Question

简单的多重条形图仅将主要类别['one', 'two', 'three', 'four', 'five', 'six']显示为x axis标签。有没有一种方法可以将子类别['A', 'B', 'C', 'D']显示为chartjs中的辅助x axis标签？

带有子类别标签的图形

Answer 1

您可以使用分组条形图，如此处：

const datasets = [{
    label: "red",
    backgroundColor: "red",
    data: [33, 91, null, 48]
  }, {
    label: "blue",
    backgroundColor: "blue",
    data: [38, 57, 75, 84]
  },
  {
    label: "yellow",
    backgroundColor: "yellow",
    data: [97, null, 67, 41]
  }
];

new Chart(document.getElementById("myChart"), {
  type: 'bar',
  data: {
    labels: ["one", "two", "three", "four"],
    datasets
  },
  options: {
    title: {
      display: true,
      text: 'Grouped bar chart'
    },
    scales: {
      xAxes: [{
        ticks: {
          callback: function(label, index, labels, chart) {
            result = ""
            datasets.forEach((dataset) => {
              if (dataset.data[index] !== null) {
                result += (result.length > 0 ? ', ' : '') + dataset.label;
              }
            })
            return result
          }
        }
      }]
    }
  }
});

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

在这里您可以找到更多选项和解释：https://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/