更改多个仪表板系列颜色

Question

我有一个图表，它在“单元格”下拉列表中有多种选择。通过选择每个单元格，将绘制一个新图表，但它们都具有相同的颜色。我希望每个单元格或每个图表都有自己的颜色。我该怎么做？我如何选择我想要的图表颜色：不同的图表具有不同的颜色。 问题是当我选择多个单元格为每个单元格绘制图形时，它只显示一种颜色的所有图形

我有不同的下拉菜单，我希望当用户选择不同的“单元格”时，为每个单元格绘制不同颜色的新线。它画线，但所有单元格颜色都相同。这让我发疯，我不知道我的问题是什么。

python代码

excelPath= r'C:\Users\tools\t1\materials-python-dash\avocado_analytics_3\diagram_syria.xlsx'


data = (
  pd.read_excel(os.path.join(excelPath), engine='openpyxl' )

  .assign(Date=lambda data: pd.to_datetime(data["Date"], format="%m-%d-%Y"))
  .sort_values(by="Date" )
 )
  regions = data["region"].sort_values().unique()
 kashef_types = data["type"].sort_values().unique()

 external_stylesheets = [
 {
    "href": (
    "https://fonts.googleapis.com/css2?"
    "family=Lato:wght@400;700&display=swap"
   ),
   "rel": "stylesheet",
  },
  ]
  app = Dash(__name__, external_stylesheets=external_stylesheets)
  app.title = "KASHEF Analytics: Understand Your Interference!"

   app.layout = html.Div(
 children=[
    html.Div(
       children=[
           # 🅺
            html.P(children="K", className="myz"),
          html.H1(
              children="KASHEF Analytics", className="header-title"
            ),
          html.P(
             children=(
                "Analyze the behavior of Cells "
                " over the different times "
             ),
              className="header-description",
          ),
      ],
      className="header",
   ),
   html.Div(
       children=[
           html.Div(
              children=[
                  html.Div(children="Cell", className="menu-title"),
                    dcc.Dropdown(
                      id="region-filter",
                       options=[
                          {     "label": region,
                                "value": region
                           }
                         for region in regions
                      ],
                      value="Banias-Qouz_L1",
                      clearable=False,
                      searchable=True,

                    className="dropdown",
                ),
            ]
         ), 
         html.Div(
             children=[
                 html.Div(children="Type", className="menu-title"),
                 dcc.Dropdown(
                     id="type-filter",
                     options=[
                        {
                            "label": kashef_type.title(),
                            "value": kashef_type,
                        }
                        for kashef_type in kashef_types
                    ],
                    value="organic",
                    clearable=False,
                    searchable=False,
                    className="dropdown",
                ),
            ],
        ),
        html.Div(
            children=[
                html.Div(
                    children="Date Range", className="menu-title"
                ),
                dcc.DatePickerRange(
                    id="date-range",
                    min_date_allowed=data["Date"].min().date(),
                    max_date_allowed=data["Date"].max().date(),
                    start_date=data["Date"].min().date(),
                    end_date=data["Date"].max().date(),
                ),
            ]
        ),
    ],
    className="menu",
   ),
   html.Div(
       children=[
          html.Div(
             children=dcc.Graph(
                id="price-chart",
                config={"displayModeBar": False},
            ),
            className="card",
        ),
        #html.Div(
        #3    children=dcc.Graph(
        #        id="price-chart",
         #       config={"displayModeBar": False},
          #  ),
           # className="card",
       # ),
     ],
     className="wrapper",
    ),
    ]
   )


   


    @app.callback(
    Output("price-chart", "figure"),
    Input("region-filter", "value"),
    Input("type-filter", "value"),
    Input("date-range", "start_date"),
    Input("date-range", "end_date"),
 )
 def update_charts(region, kashef_type, start_date, end_date):
 filtered_data = data.query(
 "region == @region and type == @kashef_type"
 " and Date >= @start_date and Date <= @end_date"
   )
  pucch_pusch_chart_figure = {
   "data": [
     {
        "x": filtered_data["Date"],
        "y": filtered_data["PUCCH"],
        "type": "lines",
        "hovertemplate": "%{y:.2f}<extra></extra>",
    },
  ],
   "layout": {
    "title": {
        "text": "Analyzed by Kashef",
        "x": 0.05,
        "xanchor": "left",
    },
    "xaxis": {"fixedrange": True},
    "yaxis": {"tickprefix": "", "fixedrange": True},
    "colorway": ["#17B897"],
   },
  }
  return pucch_pusch_chart_figure

   if __name__ == "__main__":
   app.run(host='172.27.112.57',port='8050',debug=True)

CSS代码

body {
  font-family: "Lato", sans-serif;
  margin: 0;
  background-color: #F7F7F7;
 }

.header {
  /*TOP BACKGROUND*/
   background-color: #081054;
   height: 288px;
    padding: 16px 0 0 0;
 }

 .header-emoji {



   font-size: 48px;
   margin: 0 auto;
   text-align: center;

   }

 .header-title {
    color: #FFFFFF;
    font-size: 48px;
    font-weight: bold;
    text-align: center;
    margin: 0 auto;
   }

  .header-description {
     color: #FFFFFF;
      margin: 4px auto;
      text-align: center;
       max-width: 384px;
  }

  .wrapper {
       margin-right: auto;
        margin-left: auto;
        max-width: 1024px;
        padding-right: 10px;
         padding-left: 10px;
        margin-top: 32px;
    }

   .card {
       margin-bottom: 24px;
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
 }

  .menu {
     height: 112px;
     width: 912px;
     display: flex;
     justify-content: space-evenly;
     padding-top: 24px;
     margin: -80px auto 0 auto;
     background-color: #DEEAFD;
     box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.18);
   }

   .Select-control {
       width: 256px;
        height: 48px;
      } 

   .Select--single>.Select-control .Select-value,
   .Select-placeholder {
   line-height: 48px;
   }

  .Select--multi .Select-value-label {
   line-height: 32px;
   }

.menu-title {
   margin-bottom: 6px;
   font-weight: bold;
    color: #081054;
   }

Answer 1

您可以使用plotly.express中的

px.line()

来获得所需的行为：

@app.callback(
    Output("price-chart", "figure"),
    Input("region-filter", "value"),
    Input("type-filter", "value"),
    Input("date-range", "start_date"),
    Input("date-range", "end_date"),
)
def update_charts(region, kashef_type, start_date, end_date):
    filtered_data = data.query(
        "region == @region and type == @kashef_type"
        " and Date >= @start_date and Date <= @end_date"
    )

    pucch_pusch_chart_figure = px.line(
        filtered_data,
        x="Date",
        y="PUCCH",
        color="region"
    )

    pucch_pusch_chart_figure.update_traces(hovertemplate="%{y:.2f}<extra></extra>")

    pucch_pusch_chart_figure.update_layout(
        title={
            "text": "Analyzed by Kashef",
            "x": 0.05,
            "xanchor": "left",
        }
        xaxis_fixedrange=True,
        yaxis_fixedrange=True,
        yaxis_tickprefix=""
    )

    return pucch_pusch_chart_figure

请参阅带有列编码颜色的线图。