Столбчатая диаграмма Chart.js в противоположном направлении

1

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

Вот мои варианты диаграммы:

var options = {
            layout: {
                padding: {
                  top: 5,
                }
            },
            scales:
            {
                yAxes: [{
                    display: true,
                    barPercentage: 0.4, 
                    ticks: {
                        fontSize: 12 
                    },
                    stacked: true, 
                }],
                xAxes: [{ 
                    stacked: true, 
                }]
            },
            responsive: true,
            maintainAspectRatio: false,
            legend: {
                display: false,
            },
            animation: {
                animateScale: true,
                animateRotate: true
            },
        };

        var opt = {
          type: "horizontalBar",
          data: { 
            labels: ageGroup, 
            datasets: [{ 
                label: 'Male',
                data: maleData, 
                backgroundColor: '#2196F3',
                hoverBackgroundColor: '#2196F3'
            },
            {
                label: 'Female',
                data: femaleData,
                backgroundColor: '#E91E63',
                hoverBackgroundColor: '#E91E63'
            }] 
          }, 
          options: options
        };

Я изменил положительное значение в массиве femaleData на отрицательное число, чтобы достичь результата выше:

for(var i = 0; i < femaleData.length; i++){
        femaleData[i] = -Math.abs(femaleData[i]);
}

Однако, как вы можете видеть, ось y в точке 0 не централизована, поскольку она подталкивается в правую сторону, поскольку левая сторона получает больше данных. Я даже не уверен, что это правильный способ установить график в противоположном направлении. Есть идеи?

Заранее спасибо!

  • 0
    Да, это правильный путь, и это ожидаемое поведение!
  • 0
    Но тогда ось x для растущей влево показывает отрицательное значение. Есть ли способ сделать это положительным или так? Кроме того, значение при наведении курсора на полосу также показывает отрицательное значение. Есть ли способ отменить это? Потому что я не могу найти ни одного примера по этому поводу, но я видел, что некоторые с помощью диаграммы Google могут это сделать.
Показать ещё 2 комментария
Теги:
chart.js

1 ответ

2
Лучший ответ

в соответствии с требованиями, указанными в разделе комментариев OP

ꜱʜᴏᴡ ᴘᴏꜱɪᴛɪᴠᴇ ᴠᴀʟᴜᴇꜱ ᴏɴ x- ᴀxɪꜱ

используйте следующую функцию обратного вызова для тиков оси x-:

callback: function(t, i) {
   return t < 0 ? Math.abs(t) : t;
}

ꜱʜᴏᴡ ᴘᴏꜱɪᴛɪᴠᴇ ᴠᴀʟᴜᴇ ᴏɴ ᴛᴏᴏʟᴛɪᴘ

используйте следующую функцию обратного вызова для всплывающих подсказок:

callbacks: {
   label: function(t, d) {
      var datasetLabel = d.datasets[t.datasetIndex].label;
      var xLabel = Math.abs(t.xLabel);
      return datasetLabel + ': ' + xLabel;
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var ageGroup = ['0-10', '11-20', '21-30', '31-40', '41-50', '51-60', '61-70', '71-80', '80+'];
var maleData = [30, 0, 0, 0, 10, 0, 0, 0, 0];
var femaleData = [0, 0, 0, -20, -50, -20, 0, 0, 0];

var options = {
   layout: {
      padding: {
         top: 5,
      }
   },
   scales: {
      yAxes: [{
         display: true,
         barPercentage: 0.4,
         ticks: {
            fontSize: 12
         },
         stacked: true,
      }],
      xAxes: [{
         stacked: true,
         ticks: {
            callback: function(t, i) {
               return t < 0 ? Math.abs(t) : t;
            }
         }
      }]
   },
   tooltips: {
      callbacks: {
         label: function(t, d) {
            var datasetLabel = d.datasets[t.datasetIndex].label;
            var xLabel = Math.abs(t.xLabel);
            return datasetLabel + ': ' + xLabel;
         }
      }
   },
   responsive: true,
   //maintainAspectRatio: false,
   legend: {
      display: false,
   },
   animation: {
      animateScale: true,
      animateRotate: true
   },
};

var opt = {
   type: "horizontalBar",
   data: {
      labels: ageGroup,
      datasets: [{
         label: 'Male',
         data: maleData,
         backgroundColor: '#2196F3',
         hoverBackgroundColor: '#2196F3'
      }, {
         label: 'Female',
         data: femaleData,
         backgroundColor: '#E91E63',
         hoverBackgroundColor: '#E91E63'
      }]
   },
   options: options
};

new Chart(ctx, opt);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>
  • 0
    Спасибо!!!! Но тогда есть ли способ централизовать ось для 0? потому что это, кажется, подталкивает к правой стороне
  • 0
    Не уверен, подходит ли это для вашего случая или нет, но вы могли бы установить min значение для отметок по оси x, например - min: -2.0 (хотя, это не рекомендуется, то, что вы видите, является правильным поведением)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню