javascript - 上下で色が異なる plotly.js ウォーターフォール チャート

Question

以前の値と比較して浮き沈みを示す plotlyjs を使用してウォーターフォール チャートを作成したいと考えています。上は緑、下は赤で表します。

plotly.js を使用してこのようなグラフを作成するにはどうすればよいですか?

plotly サイトに示されている例では、値の範囲ごとに色が異なり、浮き沈みとは関係ありません。

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>