0
209
VistasPlotly.js para datos ordenados - Color de barra
Soy nuevo en plotly JS, pero tengo una buena experiencia con python; quiero obtener los mismos resultados que los siguientes:
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()Esencialmente, para usar el valor de los datos para agregar colores distintos a mis barras, ¿hay alguna manera fácil de obtener esos resultados? Obviamente, tengo un conjunto de datos ordenado.
<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>Lo que quiero hacer es colorear el gráfico en función de la Etapa: Año Mes Etapa Ingresos Fecha Acumulativo 0 2022 Feb Lead 750.0 Feb-2022 NaN 1 2022 Mar Lead 16172.5 Mar-2022 NaN 2 2022 Apr Lead 43617.0 Apr-2022 NaN 3 2022 Oct Oferta 120000.0 Oct-2022 120000.0
Saludos FCS
1 Respuestas
Responde la pregunta0
Por favor vea mi respuesta, obviamente, es muy fácil hacer un ciclo con javascript, sin embargo, sería genial saber si hay una forma más directa, no hace falta decir que esta solución tomó 3 minutos:
$(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); }); 