chartpie — u_pbt_chartpie #

← Referencia de componentes · Índice de la guía

Gráfico circular: tarta, anillo o media rueda. Cada ángulo es una parte del todo — la leyenda oculta una porción, las demás ocupan su sitio.

▶ Verlo en vivo — Aplicación de demostración, mosaico Pie chart : la vista previa, el código que lo produce y esta página, lado a lado.

En resumen #

Inicio rápido #

// One slice per region : a key, a label and a value
uo_pie.of_add_slice(/*key*/ "north", /*label*/ "North", /*value*/ 420)
uo_pie.of_add_slice(/*key*/ "south", /*label*/ "South", /*value*/ 310)
uo_pie.of_add_slice(/*key*/ "east", /*label*/ "East", /*value*/ 260)

// The share of each region, written on its slice
uo_pie.ib_data_labels = true
uo_pie.is_label_format = "#percent#"

Una porción es una PARTE del todo #

Usted da valores, nunca ángulos: el componente suma las porciones mostradas y da a cada una el ángulo de su parte de esa suma. Ocultar una porción — con un clic en la leyenda, o mediante ib_visible — la cierra en su sitio: las demás se reparten de nuevo la rueda, y #percent#, id_percent y of_total() siguen. Un valor negativo no tiene ángulo: se dibuja como cero y se relee tal como lo dio.

Los ángulos se cuentan en grados, 0 arriba, en el sentido del dibujo: ii_start_angle = -90 e ii_sweep_angle = 180 dan la mitad superior de un círculo — un indicador. La rueda se ajusta al espacio que ocupa ese ángulo: una media rueda se dibuja el doble de grande.

Propiedades #

Métodos #

Eventos #

Propiedades de elemento #

Leídas y escritas en el handle de una porción: uo_pie.of_item(/*key*/ "north").id_value = 450. Cada lectura pregunta al gráfico.

Ejemplos #

Un anillo y su total #

// A hole of 60 % of the radius : a doughnut
uo_pie.id_inner_radius = 0.6

// In the hole : the slice under the pointer, in bold above its name ;
// at rest, the total of the slices shown above the word Total
uo_pie.is_center_text = "[b]#hover_value#[/b][br]#hover_label#"

// Whole numbers with a thousands separator : a display format, as in a DataWindow
uo_pie.is_format = "#,##0"

Una media rueda como indicador #

// From the left, over half a circle : the upper half
uo_pie.ii_start_angle = -90
uo_pie.ii_sweep_angle = 180
uo_pie.id_inner_radius = 0.62

// What is spent and what is left, in the colour they mean
uo_pie.of_add_slice(/*key*/ "spent", /*label*/ "Spent", /*value*/ 72, /*color*/ RGB(/*red*/ 15, /*green*/ 108, /*blue*/ 189))
uo_pie.of_add_slice(/*key*/ "left", /*label*/ "Remaining", /*value*/ 28, /*color*/ RGB(/*red*/ 150, /*green*/ 150, /*blue*/ 150))

// The share spent, in the hole : worked out by the chart, it follows every new value
uo_pie.is_center_text = "[b]#percent:spent#[/b][br]spent"

Un cuadro de mando vivo #

// Timer event of the window : new values for the same slices
// Local variables
string ls_keys[] = {"s1", "s2", "s3"}
double ld_load[]

// Read the figures, then hand them to the slices already on the chart : they
// SLIDE to their new angles instead of replaying their arrival
ld_load = wf_read_load()
uo_pie.of_set_values(/*keys*/ ls_keys, /*values*/ ld_load)

Abrir las filas detrás de una porción #

// Event ue_slice_dblclicked of uo_pie : the key of the slice is the region
wf_open_orders(/*region*/ as_key, /*amount*/ ad_value)

Un menú sobre una porción #

// Event ue_slice_rclicked of uo_pie : (string as_key, long al_x, long al_y)
// Remember the slice, then open the contextmenu of the window where the gesture
// was made : the pointer, or the middle of the slice for the Menu key
is_menu_slice = as_key
uo_menu.of_show(/*x*/ al_x, /*y*/ al_y)

Desde un DataStore #

// Local variables
long ll_rc

// One slice per category : the rows of a category are SUMMED into its slice
uo_pie.of_map(/*role*/ u_pbt_chartpie.ROLE_KEY, /*column*/ "category")
uo_pie.of_map(/*role*/ u_pbt_chartpie.ROLE_LABEL, /*column*/ "category")
uo_pie.of_map(/*role*/ u_pbt_chartpie.ROLE_VALUE, /*column*/ "amount")

// ONE call reads every row of the DataStore retrieved when the window opened
// (an instance variable), no loop
ll_rc = uo_pie.of_from_datastore(/*ads*/ ids_sales)

// A row with no category is skipped : the chart says how many
if uo_pie.of_get_last_error() <> "" then wf_status(uo_pie.of_get_last_error())

La DataWindow en pantalla, releída en su sitio #

// Open event of the window : the chart reads the DataWindow the user sees
uo_pie.of_map(/*role*/ u_pbt_chartpie.ROLE_KEY, /*column*/ "region")
uo_pie.of_map(/*role*/ u_pbt_chartpie.ROLE_VALUE, /*column*/ "amount")
uo_pie.of_from_datastore(/*adw*/ dw_sales)

// After a Retrieve : the slices follow IN PLACE - a region the user hid from
// the legend stays hidden, a new region gets its slice
dw_sales.Retrieve()
uo_pie.of_reload()

Las porciones pequeñas en «Otros» #

// Every slice under 5 % of the total joins ONE slice, drawn last in grey,
// and only the six largest products keep a slice of their own
uo_pie.id_others_threshold = 5
uo_pie.ii_others_top = 6
uo_pie.is_others_label = "Other products"

// The largest first : the reader compares them from the top
uo_pie.is_sort = u_pbt_chartpie.SORT_DESC

// Event ue_slice_clicked of uo_pie : a click on Others opens the slices it holds
// Local variables
string ls_keys[]

// Others names the slices it gathered
if as_key = uo_pie.OTHERS_KEY then
	uo_pie.of_others_keys(/*keys*/ ls_keys)
	wf_open_products(/*keys*/ ls_keys)
end if

Buenas prácticas #

• Pocas porciones. Más allá de seis o siete, el ojo ya no compara ángulos vecinos: agrupe las pequeñas en una porción «Otros» (id_others_threshold), o pase al gráfico cartesiano.
• Ordene las porciones de la mayor a la menor (is_sort = SORT_DESC), empezando arriba: la lectura sigue el sentido del dibujo.
• Etiquetas fuera cuando las porciones son estrechas: siguen legibles, unidas a su porción, en vez de omitirse.
• Corte la animación en un cuadro de mando que se refresca, o consérvela y llame a of_set_values: las porciones se deslizan en vez de reiniciar su llegada.
• El gráfico conserva el sentido del dibujo en una aplicación de derecha a izquierda — las etiquetas exteriores también se escriben de izquierda a derecha, lejos de la rueda; solo la leyenda START/END y sus flechas siguen el sentido de lectura.
• Una imagen del gráfico (of_save_as_png, la impresión) se toma una vez posado el deslizamiento: no hace falta cortar antes la animación.
• Un color que significa algo (con retraso, gastado) se pone con il_color; deje el resto a la paleta, que cambia con el tema claro u oscuro.

Heredado de la base común #

Estos miembros existen en todos los componentes visuales — no son propios de este. Se detallan una sola vez, en los capítulos transversales; esta tabla solo dice dónde leerlos.

Dos ayudas no se heredan: of_icon y of_escape_markup viven en n_pbt_utils. Declare uno — n_pbt_utils lnv_utils, nada que crear — y llámelas sobre él.

← Referencia de componentes · Índice de la guía