Диаграмма. js Stacked Bar - видимость и порядок набора данных - PullRequest
Новая
       10

Диаграмма. js Stacked Bar - видимость и порядок набора данных

0 голосов
/ 16 апреля 2020

У меня есть составная диаграмма с 3 наборами данных: красный, зеленый, синий. Вот ссылка на JSFiddle: https://jsfiddle.net/bwcfL58v/

Stacked Bar as Layers

Давайте представим, что это слои, которые перекрывают друг друга: Красный как нижний слой, затем Зеленый как средний слой и Синий как верхний слой.

Посмотрите на третий день: мы не видим значение красного, потому что оно стоит за зеленым значением (красный меньше зеленого Вот). Итак, вопрос в том, как переместить зеленый цвет в нижний слой, а красный выше. Мне нужно, чтобы наибольшее значение всегда было внизу, а наименьшее значение - вверху, это позволит нам видеть все наборы данных за каждый день.

Все, что мне нужно, это чтобы наборы данных всегда были видны и не прячьте друг друга. 

let ctx = document.getElementById("myChart");
let myChart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["Day 1", "Day 2", "Day 3"],
    datasets: [
      {
        label: 'Blueberry',
        data: [25, 30, 40],
        backgroundColor: 'blue',                          
      },
      {
        label: 'Greenberry',
        data: [50, 60, 100],
        backgroundColor: 'green',                          
      },
      {
        label: 'Strawberry',
        data: [100, 120, 50],
        backgroundColor: 'red',                          
      }
    ]
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    scales: {
      xAxes: [{
        stacked: true,
        gridLines: {
          drawOnChartArea: false
        },
      }],
      yAxes: [{
        stacked: false,
        display: false,
        gridLines: {
          drawOnChartArea: false
        },
        ticks: {
          beginAtZero: true,
        },
      }]
    },
    legend: {
      display: false
    }
  }
});
...