Browse Source

Echarts Erstellung von Serien in Diagrammen #17

master
Daniel Quathamer 4 days ago
parent
commit
09c1593ee0
  1. 2
      src-modules/module/viz/conf/viz.xml
  2. 2
      src-modules/module/viz/schluesseltabellen/viz_properties_echarts_fuellen.sql
  3. 1
      src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql
  4. 1
      src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql
  5. 1
      src-modules/module/viz/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql
  6. 8
      src-modules/module/viz/upgrade/viz_upgrade_man.sql
  7. 286
      superx/xml/js/viz/viz_viewer.js

2
src-modules/module/viz/conf/viz.xml

@ -1180,7 +1180,6 @@ detail_chart_uniquename varchar(255)
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_d3js_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_d3js_fuellen.sql" database=""/>
@ -1373,7 +1372,6 @@ detail_chart_uniquename varchar(255)
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql" database=""/>
<nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_d3js_fuellen.sql" database=""/> <nativeaction sql="" scriptfile="$VIZ_PFAD/schluesseltabellen/viz_properties_d3js_fuellen.sql" database=""/>

2
src-modules/module/viz/schluesseltabellen/viz_properties_echarts_fuellen.sql

@ -764,7 +764,7 @@
}, },
{ "caption":"Äußerer Radius in %", { "caption":"Äußerer Radius in %",
"prop_uniquename":"outerRadius", "prop_uniquename":"outerRadius",
"explanation":"Äußerer Radius bei Tortendiagrammen (Faktor in %). Parameter definiert den Anteil des Kreises am ganzen Rechteck", "explanation":"Äußerer Radius bei Tortendiagrammen (Faktor in %). Parameter definiert den Anteil des Kreises am ganzen Rechteck. Wird bei Serien-Kreisdiagrammen nicht ausgewertet bzw. automatisch berechnet.",
"prop_default":"80", "prop_default":"80",
"prop_unit":"%", "prop_unit":"%",
"is_generic":"0", "is_generic":"0",

1
src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_fuellen.sql

@ -37,6 +37,7 @@
"is_mandatory":"1"}, "is_mandatory":"1"},
{"viz_property_uniquename":"y", {"viz_property_uniquename":"y",
"is_mandatory":"1"}, "is_mandatory":"1"},
{"viz_property_uniquename":"stroke","is_mandatory":"0"},
{"viz_property_uniquename":"xAxisNode"}, {"viz_property_uniquename":"xAxisNode"},
{"viz_property_uniquename":"xAxisName"}, {"viz_property_uniquename":"xAxisName"},
{"viz_property_uniquename":"xAxisNameLocation"}, {"viz_property_uniquename":"xAxisNameLocation"},

1
src-modules/module/viz/schluesseltabellen/viz_properties_echarts_line_bar_series_fuellen.sql

@ -1,4 +1,5 @@
--Freemarker Template --Freemarker Template
--obsolet
<#include "SQL_lingua_franca"/> <#include "SQL_lingua_franca"/>
<#include "SuperX_general"/> <#include "SuperX_general"/>
<#include "VIZ-Makros"/> <#include "VIZ-Makros"/>

1
src-modules/module/viz/schluesseltabellen/viz_properties_echarts_pie_fuellen.sql

@ -21,6 +21,7 @@
"is_mandatory":"1"}, "is_mandatory":"1"},
{"viz_property_uniquename":"measure1", {"viz_property_uniquename":"measure1",
"is_mandatory":"1"}, "is_mandatory":"1"},
{"viz_property_uniquename":"stroke","is_mandatory":"0"},
{"viz_property_uniquename":"innerRadius"}, {"viz_property_uniquename":"innerRadius"},
{"viz_property_uniquename":"outerRadius"}, {"viz_property_uniquename":"outerRadius"},
{"viz_property_uniquename":"cornerRadiusRounded"} {"viz_property_uniquename":"cornerRadiusRounded"}

8
src-modules/module/viz/upgrade/viz_upgrade_man.sql

@ -51,3 +51,11 @@ alter table dim_studiengang add column ist_lehramt smallint default 0;
update themenbaum set gueltig_bis=date_val('01.01.2000') where maskeninfo_id=44100; update themenbaum set gueltig_bis=date_val('01.01.2000') where maskeninfo_id=44100;
update viz_chart set chart_active=0 update viz_chart set chart_active=0
where uniquename in ('STUD_FAK_ABGRP_STG_SUNBURST','STUD_FAK_KURZ_PIE','STUD_FAK_KURZ_DONUT_JB'); where uniquename in ('STUD_FAK_ABGRP_STG_SUNBURST','STUD_FAK_KURZ_PIE','STUD_FAK_KURZ_DONUT_JB');
delete from viz_type_property where viz_type_id in (
select T.tid from viz_type T
where T.uniquename in ('echarts_bar_x_series','echarts_bar_y_series','echarts_line_x_series','echarts_line_y_series'));
delete from viz_type
where uniquename in ('echarts_bar_x_series','echarts_bar_y_series','echarts_line_x_series','echarts_line_y_series');

286
superx/xml/js/viz/viz_viewer.js

@ -160,21 +160,29 @@ function openModalCardDetail(ergebniselementOrdnr)
} }
function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel) function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel,seriesDistinctColumnValues)
{ {
var dataset =new Array(); var dataset =new Array();
var dataset0=new Array();
var chartType=(currentChartModel!=null)?currentChartModel.chartElements[0].vizTypeUniquename : "echarts_generic"; var chartType=(currentChartModel!=null)?currentChartModel.chartElements[0].vizTypeUniquename : "echarts_generic";
//Identify dimensions and measures: //Identify dimensions and measures:
switch (chartType) { switch (chartType) {
case "echarts_pie": case "echarts_pie":
var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");
var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1");
dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname); var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
dataset0={source:fillEchartsDataSetNameValue(rs[0],rsColumnMetaData[0],dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues)};
dataset.push(dataset0);
//dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues);
if(seriesFldname && seriesDistinctColumnValues && seriesDistinctColumnValues.length>0)
{
dataset=(getEchartsDatasetWithTransformFilters(dataset,seriesFldname,seriesDistinctColumnValues));
}
break; break;
case "echarts_bar_y_series": case "echarts_bar_y_series":
case "echarts_line_y_series": case "echarts_line_y_series":
//obsolet
var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke"); var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
var seriesSelectionLine=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"series_selection_line"); var seriesSelectionLine=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"series_selection_line");
var seriesSelectionColumn=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"series_selection_column"); var seriesSelectionColumn=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"series_selection_column");
@ -182,14 +190,46 @@ function fillEchartsDataSet(myRs,myRsMetaData,currentChartModel)
break; break;
case "echarts_generic": case "echarts_generic":
dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData); dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
break; default: break;
dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData); default:
//dataset=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
dataset0=fillEchartsDataSetSimpleCopy(myRs,myRsMetaData);
//{source:fillEchartsDataSetNameValue(rs[0],rsColumnMetaData[0],dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues)};
dataset.push(dataset0);
//dataset=fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues);
if(seriesFldname && seriesDistinctColumnValues && seriesDistinctColumnValues.length>0)
{
dataset=(getEchartsDatasetWithTransformFilters(dataset,seriesFldname,seriesDistinctColumnValues));
}
break; break;
} }
return dataset; return dataset;
} }
function getEchartsDatasetWithTransformFilters(myDataset,seriesFieldname,seriesDistinctColumnValues)
{
var i=0;
seriesDistinctColumnValues.forEach((row) => {
var transformObj={
transform: {
type: 'filter',
config: { dimension: seriesFieldname, value: row}
}
}
i++;
if(i<10)
{
//mehr als 10 Serien sind nicht darstellbar, eigentlich sollten es 2-3 sein
myDataset.push(transformObj);
}
});
return myDataset;
}
function fillEchartsDataSetSeries(myRs,myRsMetaData,dimension1Fldname,seriesSelectionLine,seriesSelectionColumn) function fillEchartsDataSetSeries(myRs,myRsMetaData,dimension1Fldname,seriesSelectionLine,seriesSelectionColumn)
{ {
var myDimensions=[]; var myDimensions=[];
@ -399,7 +439,7 @@ function fillEchartsDataSetCrosstab(myRs,myRsMetaData,dimension1Fldname,dimensio
}*/ }*/
return datasetSourceRow; return datasetSourceRow;
} }
function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname) function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure1Fldname,seriesFldname,seriesDistinctColumnValues)
{ {
var datasetSourceRow=new Array(); var datasetSourceRow=new Array();
var datasetSourceCol=new Array(); var datasetSourceCol=new Array();
@ -407,13 +447,20 @@ function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure
var columnCount=myRsMetaData.length; var columnCount=myRsMetaData.length;
var rowCount=myRs.length; var rowCount=myRs.length;
if(seriesFldname)
datasetSourceCol=[dimension1Fldname,measure1Fldname]; {
datasetSourceCol=[dimension1Fldname,measure1Fldname,seriesFldname];
}
else
{
datasetSourceCol=[dimension1Fldname,measure1Fldname];
}
datasetSourceRow.push(datasetSourceCol); datasetSourceRow.push(datasetSourceCol);
//now the data: //now the data:
//bei pie chartdimensions:myDimensionss ist die erste Spalte der Name, die zweite der Wert: //bei pie chartdimensions:myDimensionss ist die erste Spalte der Name, die zweite der Wert:
var dimension1Value; var dimension1Value;
var seriesFldValue;
var measure1Value; var measure1Value;
myRs.forEach((row) => { myRs.forEach((row) => {
for (var col in row) { for (var col in row) {
@ -422,11 +469,17 @@ function fillEchartsDataSetNameValue(myRs,myRsMetaData,dimension1Fldname,measure
dimension1Value=row[col]; dimension1Value=row[col];
if(col==measure1Fldname) if(col==measure1Fldname)
measure1Value=row[col]; measure1Value=row[col];
if(col==seriesFldname)
seriesFldValue=row[col];
} }
var datasetSourceCol=new Array(); var datasetSourceCol=new Array();
datasetSourceCol.push(dimension1Value); datasetSourceCol.push(dimension1Value);
datasetSourceCol.push(measure1Value); datasetSourceCol.push(measure1Value);
if(seriesFldname)
{
datasetSourceCol.push(seriesFldValue);
}
datasetSourceRow.push(datasetSourceCol); datasetSourceRow.push(datasetSourceCol);
@ -1472,6 +1525,7 @@ function getPlotOptionsObj(chartPropertiesUsed,currentChartModel)
/*echarts:*/ /*echarts:*/
function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitle) function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitle)
{ {
var seriesDistinctColumnValues=new Array();
//first empty the element, if necessary: //first empty the element, if necessary:
var chartDivElem=document.getElementById(chartDiv); var chartDivElem=document.getElementById(chartDiv);
while (chartDivElem.firstChild) { while (chartDivElem.firstChild) {
@ -1486,7 +1540,12 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
var titleText=chartTitle; var titleText=chartTitle;
if(chartTitle=="") if(chartTitle=="")
titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption"); titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"caption");
var myDataset=fillEchartsDataSet(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],currentChartModel); var seriesFieldname=getChartElementPropertyValueFromModel(currentChartModel,"1","stroke");
if(seriesFieldname && seriesFieldname!="")
{
seriesDistinctColumnValues=getDistinctColumnValues(rs[ergebniselementOrdnr],seriesFieldname);
}
var myDataset=fillEchartsDataSet(rs[ergebniselementOrdnr],rsColumnMetaData[ergebniselementOrdnr],currentChartModel,seriesDistinctColumnValues);
if(chartType=="echarts_native_interactive") if(chartType=="echarts_native_interactive")
{ {
var option; var option;
@ -1592,7 +1651,7 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
case "echarts_line_x": case "echarts_line_x":
case "echarts_line_y": case "echarts_line_y":
case "echarts_bar_y": case "echarts_bar_y":
option=getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText); option=getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText,seriesDistinctColumnValues);
break; break;
case "echarts_bar_y_series": case "echarts_bar_y_series":
case "echarts_line_y_series": case "echarts_line_y_series":
@ -1600,7 +1659,7 @@ function renderEChart2(currentChartModel,chartDiv,ergebniselementOrdnr,chartTitl
break; break;
case "echarts_pie": case "echarts_pie":
option=getEchartOptionsPie(currentChartModel,myDataset); option=getEchartOptionsPie(currentChartModel,myDataset,seriesDistinctColumnValues);
break; break;
case "echarts_sankey": case "echarts_sankey":
@ -1821,7 +1880,7 @@ function closeModalCardDetail(ergebniselementOrdnr)
myModalCard.classList.remove('is-active'); myModalCard.classList.remove('is-active');
} }
function getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText) function getEchartOptionsBarLine(currentChartModel,myDataset,chartType,titleText,seriesDistinctColumnValues)
{ {
//TODO: bar_x und y abfangen' //TODO: bar_x und y abfangen'
var chartTypes = chartType.split(/_/); var chartTypes = chartType.split(/_/);
@ -1846,7 +1905,7 @@ if(orientation=="x")
var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle"); var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle");
//var measure1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,measure1Axis); //var measure1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,measure1Axis);
var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette); var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,myDataset,dimension1Axis,measure1Axis,seriesDistinctColumnValues,myPalette);
//var dimension1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,dimension1Axis); //var dimension1Fldname=getChartPropertyValue(currentChartModel.chartPropertiesUsed,dimension1Axis);
@ -1932,8 +1991,9 @@ var seriesArray=getEchartSeriesArray(currentChartModel,chartType,orientation,dim
return option; return option;
} }
function getEchartSeriesArray(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette) function getEchartSeriesArrayAlt(currentChartModel,chartType,orientation,dimension1Axis,measure1Axis,myPalette)
{ {
//obsolet
var seriesArray= new Array(); var seriesArray= new Array();
for(var k=0;k < currentChartModel.chartElements.length;k++) { for(var k=0;k < currentChartModel.chartElements.length;k++) {
@ -1991,6 +2051,111 @@ function getEchartSeriesArray(currentChartModel,chartType,orientation,dimension1
} }
function getEchartSeriesArray(currentChartModel,chartType,orientation,myDataset,dimension1Axis,measure1Axis,seriesDistinctColumnValues,myPalette)
{
var seriesArray= new Array();
for(var k=0;k < currentChartModel.chartElements.length;k++) {
var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,k+1,measure1Axis);
var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,k+1,dimension1Axis);
var encodeObj={x:dimension1Fldname,y:measure1Fldname};
var datasource=currentChartModel.dataSources[0].value;
var measureCaption=getMetadataOfVizTypeProperty(rsColumnMetaData[datasource],measure1Fldname);
if(orientation=="x")
encodeObj={y:dimension1Fldname,x:measure1Fldname};
var seriesFldname=getChartElementPropertyValueFromModel(currentChartModel,k+1,"stroke");
if(seriesFldname && seriesFldname !="")
{
var dsIndex=1;
seriesDistinctColumnValues.forEach((row) => {
var seriesObj=createBarLineSeriesObj(currentChartModel,chartType,orientation,row,encodeObj,dsIndex);
seriesArray.push(seriesObj);
dsIndex++;
});
//var sdn=new sankeyDataNode(sourceName,sdnl);
}
else
{
//keine Serien-Dimension:
var mySeriesObj=createBarLineSeriesObj(currentChartModel,chartType,orientation,measureCaption,encodeObj,0);
seriesArray.push(mySeriesObj);
}
} //Ende Schleife chartElements
return seriesArray;
}
function getDistinctColumnValues(myRs,fieldname)
{
var distinctValues=new Array();
myRs.forEach(row => {
var newName = row[fieldname];
if(newName !="")
{
if( distinctValues.length==0)
{
distinctValues.push(newName);
}
else if( distinctValues.length>0 && !distinctValues.includes(newName))
{
distinctValues.push(newName);
}
}
});
return distinctValues;
}
function createBarLineSeriesObj(currentChartModel,chartType,orientation,measureCaption,encodeObj,datasetIndex)
{
var localSeriesObj={
type: chartType, //bar,line,
name:measureCaption,
smooth: true,
encode: encodeObj,
datasetIndex:datasetIndex,
stack:"myStack",
barWidth: '30%',
showBackground: true,
backgroundStyle: {
color: '#dfe4f2'
},
margin: 50,
fontSize: "2em",
colorBy: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"seriesColorBy"),//'series',// 'data',
//color: myPalette,
lineStyle: {
width: 7
},
label: {
show: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"valueLabelShow")=="false")?false:true, //true
fontWeight:'bolder',
fontSize: "2em",
distance:30,
//offset:[30, 40],
// position:"bottom",
/*labelLayout:{}*/
position:getChartPropertyValue(currentChartModel.chartPropertiesUsed,"position_valueLabel"), //"bottom",
offset: getOffsetValuelabelArray(getChartPropertyValue(currentChartModel.chartPropertiesUsed,"offset_x_valueLabel"),
getChartPropertyValue(currentChartModel.chartPropertiesUsed,"offset_y_valueLabel")),
formatter: function (params) {
return params.value[params.dimensionNames[params.encode.y[0]]].toLocaleString()
}
},
labelLayout(params) {
return getLabelLayout(chartType,params,orientation)
}
};
return localSeriesObj;
}
function getEchartOptionsBarLineSeries(currentChartModel,myDataset,chartType,titleText) function getEchartOptionsBarLineSeries(currentChartModel,myDataset,chartType,titleText)
{ {
//TODO: bar_x und y abfangen' //TODO: bar_x und y abfangen'
@ -2180,7 +2345,7 @@ function getEchartOptionsNative(currentChartModel,myDataset)
return options; return options;
} }
function getEchartOptionsPie(currentChartModel,myDataset) function getEchartOptionsPie(currentChartModel,myDataset,seriesDistinctColumnValues)
{ {
var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");
var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1"); var dimension1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","dimension1");
@ -2188,12 +2353,32 @@ var titleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"capti
var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle"); var subtitleText=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"subtitle");
var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"schemeArray"); var scheme = getChartPropertyValue(currentChartModel.chartPropertiesUsed,"schemeArray");
var myPalette=getPaletteArray(scheme,""); var myPalette=getPaletteArray(scheme,"");
var echartsSeriesPie=new Array;
var titleTextArray=new Array;
if(seriesDistinctColumnValues && seriesDistinctColumnValues.length>1)
{
var dsIndex=1;
//bei Serien bekommt jede Torte eine Überschrift:
titleTextArray=getSeriesTitleArray(seriesDistinctColumnValues);
seriesDistinctColumnValues.forEach((row) => {
echartsSeriesPie.push(getEchartsSeriesPie(dsIndex,seriesDistinctColumnValues.length,currentChartModel,myPalette));
dsIndex++;
});
}
else
{
//nur eine Serie:
echartsSeriesPie.push(getEchartsSeriesPie(0,0,currentChartModel,myPalette));
}
var option = { var titleObj;
dataset: { if(titleTextArray && titleTextArray.length>0)
source: myDataset {
}, titleObj=titleTextArray;
title: { }
else
{
titleObj={
text: titleText, text: titleText,
subtext: subtitleText, subtext: subtitleText,
left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.left"), //"center", left: getChartPropertyValue(currentChartModel.chartPropertiesUsed,"title.left"), //"center",
@ -2204,15 +2389,54 @@ var option = {
subtextStyle: { subtextStyle: {
fontSize: 15 fontSize: 15
} }
}, }
}
var option = {
dataset: myDataset,
title: titleObj,
series: echartsSeriesPie
};
series: [ return option;
{
}
function getSeriesTitleArray(seriesDistinctColumnValues)
{
var iMax=seriesDistinctColumnValues.length;
var titleArray=new Array();
var i=1;
seriesDistinctColumnValues.forEach((row) => {
var xCoord=(i*100/(iMax+1)).toString()+"%";
titleArray.push({text: row,left:xCoord });
i++;
});
return titleArray;
}
function getEchartsSeriesPie(dsIndex,dsIndexMax,currentChartModel,myPalette)
{
var centerObj=new Array();
var outerRadius=getChartPropertyValue(currentChartModel.chartPropertiesUsed,"outerRadius");
if(dsIndex==0)
{
centerObj.push("50%"); //horizontaler Einzug
centerObj.push("25%"); //vertikaler Einzug
}
else
{
var xCoord=dsIndex*100/(dsIndexMax+1);//bei 2 Grafiken startet die erste bei 33%, die zweite bei 66%
//bei 3 Grafiken wären es 25%,50% und 75%
centerObj.push(xCoord.toString()+"%"); //horizontale Ausrichtung
centerObj.push("25%"); //y-Coord
outerRadius=100/(dsIndexMax+1);
}
var serieObj={
type: 'pie',// sunburst type: 'pie',// sunburst
/*encode: { /*encode: {
value: measure1Fldname, value: measure1Fldname,
name: dimension1Fldname name: dimension1Fldname
},*/ },*/
center:centerObj,
tooltip: { tooltip: {
trigger: "item" trigger: "item"
}, },
@ -2242,22 +2466,18 @@ var option = {
}*/, }*/,
fontSize: 12, fontSize: 12,
radius: [getChartPropertyValue(currentChartModel.chartPropertiesUsed,"innerRadius"),getChartPropertyValue(currentChartModel.chartPropertiesUsed,"outerRadius")],// ['30%', '80%'], //1. Parameter inside radius, macht ihn zum Donut. 2.Parameter definiert den Anteil des Kreises am ganzen Viewport" radius: [getChartPropertyValue(currentChartModel.chartPropertiesUsed,"innerRadius"),outerRadius],// ['30%', '80%'], //1. Parameter inside radius, macht ihn zum Donut. 2.Parameter definiert den Anteil des Kreises am ganzen Viewport"
color: myPalette, color: myPalette,
itemStyle: { itemStyle: {
borderRadius: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"cornerRadiusRounded")=="true" ? [20, 5, 5, 10] :[]), borderRadius: (getChartPropertyValue(currentChartModel.chartPropertiesUsed,"cornerRadiusRounded")=="true" ? [20, 5, 5, 10] :[]),
//borderRadius: [20, 5, 5, 10], //abgerundete Ecken der Tortenstücke //borderRadius: [20, 5, 5, 10], //abgerundete Ecken der Tortenstücke
borderColor: '#fff', borderColor: '#fff',
borderWidth: 2 borderWidth: 2
} },
datasetIndex: dsIndex
} }
] return serieObj;
};
return option;
} }
function getEchartOptionsSankey(currentChartModel,myDataset) function getEchartOptionsSankey(currentChartModel,myDataset)
{ {
var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1"); var measure1Fldname=getChartElementPropertyValueFromModel(currentChartModel,"1","measure1");

Loading…
Cancel
Save