подкатегории для каждого бара в мультибаровой диаграмме с использованием chartjs - PullRequest
Новая
       45

подкатегории для каждого бара в мультибаровой диаграмме с использованием chartjs

0 голосов
/ 20 января 2020

Простая мультикарта отображает только основную категорию ['one', 'two', 'three', 'four', 'five', 'six'] в качестве меток x axis. Есть ли способ показать подкатегорию ['A', 'B', 'C', 'D'] как вторичные x axis метки на диаграмме js?

график с метками подкатегории

enter image description here

1 Ответ

0 голосов
/ 20 января 2020

Вы можете использовать сгруппированные гистограммы, как здесь: 

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/

...