Один и тот же бар разного цвета / Один бар с разными цветами - PullRequest
Новая
       82

Один и тот же бар разного цвета / Один бар с разными цветами

0 голосов
/ 04 мая 2020

У меня есть вызов, и я иду хорошо. Мне нужно сделать этот график, используя график js. Я думаю, что я собираюсь сделать 2 разных холста, один для 3 баров (текущий месяц, следующий месяц, следующий за месяцем) над пунктирной линией и еще один для 2 баров вниз ниже пунктирной линии (текущий q, следующий q). Я исследую лучший способ сделать это, и я ценю ваш совет / помощь. Я не знаю, как настроить разные цвета для одной и той же полосы: синий, желтый и красный для одной и той же полосы.

Большое вам спасибо.

my goal

Ответы [ 2 ]

1 голос
/ 04 мая 2020

Это отвечает на вопрос из вашего заголовка: «Один и тот же столбец разного цвета / Один столбец с множеством цветов».

Это можно сделать с помощью составной гистограммы . 

new Chart(document.getElementById('canvas'), {
  type: 'horizontalBar',
  data: {
    labels: ['CURRENT MO.', 'NEXT MO.', 'FOLLOWING MO.'],
    datasets: [{
        label: '',
        data: [1.6, 1.15, 1],
        backgroundColor: 'rgb(255, 255, 255)',
        hoverBackgroundColor: 'rgb(255, 255, 255)'
      },
      {
        label: 'CERTAIN',
        data: [0.15, 0.3, 0.45],
        backgroundColor: 'rgb(119, 185, 229)'
      },
      {
        label: 'EXPECTED',
        data: [0.45, 0.7, 0.6],
        backgroundColor: 'rgb(231,200,28)'
      },
      {
        label: 'UNLIKELY',
        data: [0.25, 0.35, 0.45],
        backgroundColor: 'rgb(238, 63, 55)'
      },
    ]
  },
  options: {
    responsive: true,
    tooltips: {
      display: false
    },
    scales: {
      xAxes: [{
        stacked: true,
        ticks: {
          min: 0.5,
          max: 3
        }
      }],
      yAxes: [{
        stacked: true,
        gridlines: {
          display: false
        }
      }]
    },
    legend: {
      display: [false, true, true, true]
    },
    title: {
      display: true,
      text: 'Where Are We Going to Land?'
    }
  }
});
canvas {
  max-width: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="canvas" height="140"></canvas>
0 голосов
/ 04 мая 2020

Посмотрите на этот график. js модуль , который поддерживает диаграммы в виде ящиков и усов. Лучший способ решить вашу проблему - построить аналогичный модуль на графике. js, просто с несколькими столбиками вместо поля и усов.

...