Групповая диаграмма с несколькими слоями в chartjs

Я искал в Интернете об этом, но не нашел решения. Я пытаюсь реализовать групповую диаграмму с разделением слоев. Обычно это 1 полоса и 2 или более данных (или цвета).

Я также пробовал эту ссылку https://www.chartjs.org/docs/latest/charts/mixed.html, но это просто смешанные типы диаграмм. Пожалуйста, посмотрите изображение ниже, чтобы увидеть пример вывода, которого я хочу добиться.

enter image description here

Итак, на картинке выше всего 3 цвета: синий и смешанный желтый и оранжевый. Есть идеи по этому поводу?

Если я правильно понимаю, вы хотите, чтобы один набор данных отображался в виде одной полосы, а два других набора данных - в виде линейчатой ​​диаграммы с накоплением?

Kunal Khivensara 26.10.2018 05:55

Привет @KunalKhivensara. Да, извините за недоразумение.

Jie 26.10.2018 05:59

Я действительно сомневаюсь, что это возможно, поскольку столбчатая диаграмма с накоплением также является типом гистограммы, и для создания смешанной диаграммы с использованием chart.js необходимо указать другой тип, который одинаков для составной и простой столбчатой ​​диаграммы.

Kunal Khivensara 26.10.2018 06:05

Привет @KunalKhivensara. Кстати, что вы подразумеваете под сложенным баром? Вы говорите о горизонтальном?

Jie 26.10.2018 07:16

В моем первом комментарии я спросил, нужно ли вам показывать сложенный столбец и простой столбец вместе, вы сказали «Да». Теперь вы спрашиваете, что такое сложенная планка? это странно. Полоса синего цвета в вашем примере представляет собой простые полоски, а комбинация оранжевого и желтого в одной полоске представляет собой составную полоску.

Kunal Khivensara 26.10.2018 07:20

Ой. Хорошо. Меня просто смутил ваш 2-й комментарий. Хорошо, тогда есть какое-нибудь решение для этого?

Jie 26.10.2018 07:23

Я опубликовал решение.

Kunal Khivensara 26.10.2018 07:33
3
7
2 723
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В файле chart.js есть возможность создать групповую диаграмму с накоплением, где вы можете указать свойство стека в зависимости от потребности в группировке. См. Приведенный ниже код или скрипку -> http://jsfiddle.net/4h6dm2ny/

Надеюсь, это поможет!

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ["13Aug", "14Aug", "15Aug"],
    datasets: [{
        label: 'Blue',
        stack: 'Stack 0',
        data: [240, 270, 1320],
        backgroundColor: 'blue',
      },
      {
        label: 'Orange',
        stack: 'Stack 1',
        data: [0, 300, 1520],
        backgroundColor: 'orange',
      },
      {
        label: 'Yellow',
        data: [1500, 700, 200],
        stack: 'Stack 1',
        backgroundColor: 'yellow',
      }
    ]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true,
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
});

Это доступно только для версии ChartJS 2.7.3?

Jie 26.10.2018 10:10

Понятия не имею, обратитесь к документации chart.js

Kunal Khivensara 26.10.2018 10:17

Другие вопросы по теме