Header Ads Widget

Ticker

6/recent/ticker-posts

Trabajar con el componente de gráfico Oracle JET

 En esta publicación, veremos cómo usar el componente Oracle JET Chart (oj-chart) y sus diversas propiedades. Aquí estoy usando Oracle JET con JDeveloper 12.1.3. Para obtener más información sobre el uso de JET con JDeveloper, consulte mi publicación anterior

Vaya al libro de cocina de Oracle JET y lea la receta completa del gráfico de  barras . Aquí aprenderá sobre las propiedades básicas de un gráfico.

Ahora abra el   archivo dashboard.html de su proyecto en el editor JDeveloper y pegue este código

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div>
        <oj-chart
        id="barChart"
        type="bar"
        orientation="[[orientationValue]]"
        stack="[[stackValue]]"
        series="[[barSeriesValue]]"
        groups="[[barGroupsValue]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        hover-behavior="dim"
        style="max-width:650px;width:100%;height:350px;">
        </oj-chart>
    </div>
</div>

Aquí puede ver la  orientación, la pila, la serie, los  valores de los grupos se referencian desde diferentes variables y estas variables se utilizan en el   archivo dashboard.js para proporcionar valores al componente del gráfico.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojchart'],
function (oj, ko, $) {
    function DashboardViewModel() {
        var self = this;
        
        /*Chart Properties*/
        self.stackValue = ko.observable('off');
        self.orientationValue = ko.observable('vertical');
        /* chart data */
        var barSeries = [
        {name : "Finance", items : [42000, 55000]},
        {name : "Purchase", items : [55000, 70000]},
        {name : "Service", items : [36000, 50000]},
        {name : "Administration", items : [28000, 65000]},
        {name : "HR", items : [25000, 60000]}
        ];
         
        var barGroups = ["Average Salary", "Max Salary"];
        self.barSeriesValue = ko.observableArray(barSeries);
        self.barGroupsValue = ko.observableArray(barGroups);
        .
        .
        .

Aquí puede ver que se usa una matriz para completar datos en el gráfico de barras y todas las variables están definidas con los valores apropiados. Puede ver que tenemos dos grupos aquí para cada Departamento y la orientación del gráfico es vertical.

Ahora ejecuta y comprueba cómo se ve en el navegador.

Componente gráfico

Intente cambiar  stackValue  y  orientationValue  atributo y comprobar lo que sucede?

1
2
3
/*Chart Properties*/
   self.stackValue = ko.observable('on');
   self.orientationValue = ko.observable('horizontal');

y el gráfico de barras se ve así

Componente gráfico

Ahora estoy agregando una lista de opciones que muestra un tipo de gráfico diferente y en la selección del tipo específico, el gráfico debería cambiar, por lo que para este requisito estoy agregando un   componente oj-select-one en la página y haciendo referencia al  atributo de tipo de gráfico  a su valor

Este es el código completo del  tablero.html.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
<div class="oj-hybrid-padding">
    <h1>Dashboard Content Area</h1>
    <div>
     <oj-label for="basicSelect">Select Chart Type</oj-label>
          
        <oj-select-one id="basicSelect" value="{{chartType}}" style="max-width:20em">
            <oj-option value="bar">Bar</oj-option>
            <oj-option value="pie">Pie</oj-option>
            <oj-option value="line">Line</oj-option>
            <oj-option value="area">Area</oj-option>
        </oj-select-one>
         
        <oj-chart
        id="barChart"
        type="[[chartType]]"
        orientation="[[orientationValue]]"
        stack="[[stackValue]]"
        series="[[barSeriesValue]]"
        groups="[[barGroupsValue]]"
        animation-on-display="auto"
        animation-on-data-change="auto"
        hover-behavior="dim"
        style="max-width:650px;width:100%;height:350px;">
        </oj-chart>
    </div>
</div>

y el   archivo dashboard.js se ve así

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
/*
 * Your dashboard ViewModel code goes here
 */
define(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojchart','ojs/ojselectcombobox'],
function (oj, ko, $) {
    function DashboardViewModel() {
        var self = this;
         
        //Setting choice list attribute
        this.chartType = ko.observable("bar");
         
        /*Chart Properties*/
        self.stackValue = ko.observable('off');
        self.orientationValue = ko.observable('vertical');
        /* chart data */
        var barSeries = [
        {name : "Finance", items : [42000, 55000]},
        {name : "Purchase", items : [55000, 70000]},
        {name : "Service", items : [36000, 50000]},
        {name : "Administration", items : [28000, 65000]},
        {name : "HR", items : [25000, 60000]}
        ];
        var barGroups = ["Average Salary", "Max Salary"];
        self.barSeriesValue = ko.observableArray(barSeries);
        self.barGroupsValue = ko.observableArray(barGroups);
       .
       .
       .

Ahora ejecute e intente cambiar el tipo de gráfico de la lista de opciones

Componente gráfico
Componente gráfico

Puede descargar la aplicación Oracle JET de muestra  aquí , sus aproximadamente 13 MB como la biblioteca JET archivada se incluyen en el proyecto

Publicar un comentario

0 Comentarios