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.

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í

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

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