Как сделать несколько стековых диаграмм, чтобы делить одну и ту же ось? - PullRequest
Новая
       54

Как сделать несколько стековых диаграмм, чтобы делить одну и ту же ось?

0 голосов
/ 14 октября 2019

У меня есть 2 диаграммы с различными данными, сложенными друг на друга. Как мне сделать, чтобы эти 2 диаграммы имели одинаковую шкалу 1 оси Y?

Я настроил ось Y следующим образом: 

yAxes: [{
    display: true,
    stacked: true,
    type: "linear",
    scaleLabel: {
      display: true,
      labelString: "Amount in USD"
    },
    ticks: {
      beginAtZero: true,
      max: 150000,
      callback: function(label, index, labels) {

        return label / 1000 + "k";

      }
    }
  }]

И набор данных был следующим: 

labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
backgroundColor: "#FFE0B2",
datasets: [{
  label: "Amount of Sales - YTD",
  data: [0, 0, 0, 0, 0, 0, 0, 104920, 87461, 22700, 0, 0],
  backgroundColor: [
    "#FFE0B2"
  ],
  borderColor: [
    "#FF9800"
  ],
  borderWidth: 1,
  pointBackgroundColor: "#FFE0B2",
  pointBorderColor: "#FF9800",
  pointBorderWidth: 2
}, {
  label: "Amount of Commission - YTD",
  data: [0, 0, 0, 0, 0, 0, 0, 1896, 4373, 1135, 0, 0],
  backgroundColor: [
    "#F8BBD0"
  ],
  borderColor: [
    "#E91E63"
  ],
  borderWidth: 1,
  pointBackgroundColor: "#F8BBD0",
  pointBorderColor: "#E91E63",
  pointBorderWidth: 2
}]

Пожалуйста, посмотрите на: https://jsfiddle.net/pyzaq4j3/

Как видите, в августе точка (оранжевая) установлена ​​на ~ 100k, что является правильным.

Тем не менее, точка (розовая) имеет значение всего ~ 1.8k, а точка находится на уровне ~ 100k, согласно графику.

Вопрос : Как мне его установитьчтобы розовый график имел ту же ось у, что и оранжевый график?

1 Ответ

1 голос
/ 14 октября 2019

Проблема с этой линией в оси Y: 

stacked: true,

Если вы удалите ее, она не будет складывать значения вместе. Однако, поскольку вы указали backgroundColor в своих наборах данных, а первый набор данных имеет значение "Сумма продаж - YTD" , которое имеет более высокие значения, оно заблокирует визуальный элемент вашего второго набора данных.

...