Plotly.js 用于整理数据 - 条形颜色

Question

我是 plotly JS 的新手，但我对 python 有很好的经验 - 我想获得与以下相同的结果：

import plotly.express as px

long_df = px.data.medals_long()

fig = px.bar(long_df, x="nation", y="count", color="medal", title="Long-Form Input")
fig.show()

本质上是使用数据值为我的条形添加不同的颜色，有没有简单的方法来获得该结果？显然我有一个整洁的数据集

 <script>
                    $(document).ready(function(){
                            var xValue = {{ date|safe }};
                            var yValue = {{ revenue|safe }};
                            var stage = {{ stage|safe }};

                                var Forecast = {
                                  x: xValue,
                                  y: yValue,
                                  type: 'bar',
                                  text: yValue.map(String),
                                  textposition: 'auto',
                                  hoverinfo: 'none',
                                  name:'Leads',
                                  marker: {
                                    color: 'rgba(255, 99, 132, 0.2)',
                                    opacity: 0.8,
                                    line: {
                                      color: 'rgba(255, 99, 132, 1)',
                                      width: 1.5
                                            }
                                            }
                                        };

                            var data = [Forecast];

                            var layout = {
                                title: 'Sales Forecast - Leads and Deals',
                                barmode: 'stack'
                                         };

                            var config = {responsive: true}
                            Plotly.newPlot('DivBarChart', data, layout, config);

                     });

               </script>

我想做的是根据舞台给图表上色：年月阶段累计收入日期 0 2022 年 2 月铅 750.0 2022 年 2 月 NaN 1 2022 Mar Lead 16172.5 Mar-2022 NaN 2 2022 年 4 月铅 43617.0 2022 年 4 月 NaN 3 2022 年 10 月交易 120000.0 2022 年 10 月 120000.0

此致， FCS

Answer 1

请看我的 awnser，显然，用 javascript 做一个循环很容易，但是，如果有更直接的方法，不用说，这个解决方案很高兴知道花了 3 分钟：

 $(document).ready(function(){
                            var xValue = {{ date|safe }};
                            var yValue = {{ revenue|safe }};
                            var stage = {{ stage|safe }};
                            let array_color = []

                            for(var i=0;i<stage.length;i++){
                                if (stage[i] === "Lead"){
                                    array_color.push('rgba(255, 99, 132, 0.5)')
                                }else{
                                    array_color.push('rgba(0, 131, 117, 0.5)')

                                }
                            }
                            console.log(array_color)


                                var Forecast = {
                                  x: xValue,
                                  y: yValue,
                                  type: 'bar',
                                  text: yValue.map(String),
                                  textposition: 'auto',
                                  hoverinfo: 'none',
                                  name:'Leads',
                                  marker: {
                                    color: array_color,
                                    opacity: 1.0,
                                    }
                                        };

                            var data = [Forecast];

                            var layout = {
                                title: 'Sales Forecast - Leads and Deals',
                                barmode: 'stack'
                                         };

                            var config = {responsive: true}
                            Plotly.newPlot('DivBarChart', data, layout, config);

                     });

Plotly.js 用于整理数据 - 条形颜色

Plotly.js for tidy data - Bar color

javascript

python

django

plotly.js