plotly.js диаграмма водопада с разными цветами вверх и вниз

Question

Я хочу создать диаграмму водопада, используя plotlyjs, которая показывает взлеты и падения по сравнению с предыдущим значением.Вверх должен быть представлен зеленым цветом, а вниз - красным.

Как я могу создать такой график с помощью plotly.js?

Пример, приведенный на графическом сайте, имеет разные цвета для разных диапазонов значений и не связан с взлетами и падениями.

Answer 1

Вы можете фактически передать массив цветов в Plotly.

Если у вас есть массив значений различий, например [200, 400, -300, -150, -150], тогда вы можете сформулировать массив цветов, как показано ниже.

const labels = ["Apples", "Oranges", "Rent", "Water", "Profit"];
const values = [200, 400, -300, -150, -150];

const colors = values.map((v) => v > 0 ? 'rgba(55,128,191,1.0)' : 'rgba(219, 64, 82, 1.0)');

// Use the cumulative sum to calculate the baseline of each bar. Use this to create a stacked bar chart with white bars below and colored bars on top
const baseline = new Array(values.length);
values.reduce((sum, val, idx) => {
  baseline[idx] = val > 0 ? sum : sum + val;
  return sum + val;
}, 0);

const trace1 = {
  x: labels,
  y: baseline,
  marker: {
    color: 'rgba(1,1,1,0.0)'
  },
  type: 'bar'
};

const trace2 = {
  x: labels,
  y: values.map(Math.abs),
  marker: {
    color: colors
  },
  type: 'bar'
};

var layout = {
  title: 'Annual Profit 2018',
  barmode: 'stack',
  paper_bgcolor: 'rgba(245,246,249,1)',
  plot_bgcolor: 'rgba(245,246,249,1)',
  width: 600,
  height: 600,
  showlegend: false,
  annotations: []
};


Plotly.newPlot('plot', [trace1, trace2], layout);

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="plot"></div>