Диаграмма Chart.js с накоплением в противоположном направлении

Я пытаюсь добиться чего-то подобного, используя 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 не централизована, поскольку она как бы сдвинута в правую сторону, поскольку левая сторона получила больше данных. Я даже не уверен, что это правильный способ установить график в противоположном направлении. Любые идеи?

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


javascript chart.js stacked-chart
person BlackMamba    schedule 06.08.2017    source источник
comment
Да, это правильный способ и ожидаемое поведение!   -  person ɢʀᴜɴᴛ    schedule 06.08.2017
comment
Но тогда ось x для той, что растет влево, показывает отрицательное значение. Есть ли какой-нибудь способ сделать это позитивным или так? Кроме того, значение при наведении курсора на полосу также показывает отрицательное значение. Есть ли способ отменить это? Потому что я не могу найти никаких примеров по этому поводу, но я видел, что некоторые с диаграммой Google могут это сделать.   -  person BlackMamba    schedule 06.08.2017
comment
Да, выход есть! Вам нужно что-то вроде этого?   -  person ɢʀᴜɴᴛ    schedule 06.08.2017
comment
Да, это то, чего я пытаюсь достичь. Я сыграл хитрость, установив женское значение на отрицательные значения: p   -  person BlackMamba    schedule 06.08.2017

Ответы (1)


arrow_upward
3
arrow_downward

согласно требованиям, упомянутым в разделе комментариев 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>

person ɢʀᴜɴᴛ    schedule 06.08.2017
comment
Огромное спасибо!!!! Но тогда есть ли способ централизовать ось для 0? потому что кажется, что его подтолкнули к правой стороне - person BlackMamba; 06.08.2017
comment
Не уверен, подходит ли это для вашего случая или нет, но вы можете установить значение min для отметок оси x, например - min: -2.0 (хотя это не рекомендуется, вы видите правильное поведение) - person ɢʀᴜɴᴛ; 06.08.2017
comment
Я открыл еще одну ветку: stackoverflow.com/questions/45630315/ Не могли бы вы взглянуть? - person BlackMamba; 11.08.2017