Приборная панель Syncfusion График ⇐ CSS

[Anonymous]

Привет, я схожу с ума, но я не могу найти решение, или решение находится прямо перед моими глазами, и я не вижу его ... У меня одна страница Whit 3 Pie Graphs и 2 диаграммы столбцов.
Когда я открываю страницу в браузере, изображения графиков пирога выходят из их контейнера, почему? Код, Слава, как можно показать мне, я не вижу. />
@page
@model GraphModel

• @Model.CurYr
  
  @foreach (var item in Model.ListEYears)
  {
  @item.EYear
  }

Presenza di codici negativi


@* *@























Presenza di codici valorizzati ma con quantità zero


@*pie chart*@























Analisi movimentazione del magazzino


@*pie chart*@






















Analisi variance impact


@*pie chart*@





























Analisi Price impact


@*pie chart*@

































function onCreated(args) {
var dashboardObject = document.getElementById("editableLayout1").ej2_instances[0];
var panels = [ { "sizeX": 1, "sizeY": 1, "row": 0, "col": 0 },
{ "sizeX": 1, "sizeY": 1, "row": 0, "col": 1 },
{ "sizeX": 2, "sizeY": 1, "row": 1, "col": 0 }
]
if (ej.base.Browser.isDevice) {
dashboardObject.panels = panels;
dashboardObject.columns = 2;
dashboardObject.cellAspectRatio = 1;
setTimeout(() => {
dashboardObject.refresh();
}, 100);
}
}
var layoutColor;
function onPointRender(args){
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Fluent2';
if (selectedTheme.indexOf('dark') > -1) {
if (selectedTheme.indexOf('material') > -1) {
args.border.color = '#303030';
this.layoutColor = '#303030';
}
else if (selectedTheme.indexOf('bootstrap5') > -1) {
args.border.color = '#212529';
this.layoutColor = '#212529';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
this.layoutColor = '#1A1A1A';
}
else if (selectedTheme.indexOf('fabric') > -1) {
args.border.color = '#201f1f';
this.layoutColor = '#201f1f';
}
else if (selectedTheme.indexOf('fluent') > -1) {
args.border.color = '#252423';
this.layoutColor = '#252423';
}
else if (selectedTheme.indexOf('bootstrap') > -1) {
args.border.color = '#1A1A1A';
this.layoutColor = '#1A1A1A';
}
else if (selectedTheme.indexOf('tailwind') > -1) {
args.border.color = '#1F2937';
this.layoutColor = '#1F2937';
}
else {
args.border.color = '#222222';
this.layoutColor = '#222222';
}
}
else if (selectedTheme.indexOf('highcontrast') > -1) {
args.border.color = '#000000';
this.layoutColor = '#000000';
}
else if (selectedTheme.indexOf('fluent2-highcontrast') > -1) {
args.border.color = '#000000';
this.layoutColor = '#000000';
}
else {
args.border.color = '#FFFFFF';
this.layoutColor = '#FFFFFF';
}
if (selectedTheme.indexOf('highcontrast') > -1 || selectedTheme.indexOf('dark') > -1) {
var element = document.querySelector('#header1');
element.style.color = '#F3F2F1';
var chart1= document.getElementById('chart1');
chart1.style.setProperty('background', this.layoutColor);
var chart2= document.getElementById('chart2');
chart2.style.setProperty('background', this.layoutColor);
var chart3= document.getElementById('chart3');
chart3.style.setProperty('background', this.layoutColor);
var elementBody = document.getElementById('linechart');
elementBody.style.setProperty('background', this.layoutColor);
var element1 = document.querySelector('#header2');
element1.style.color = '#F3F2F1';
var element1Body = document.getElementById('pie');
element1Body.style.setProperty('background', this.layoutColor);
var element2 = document.querySelector('#header3');
element2.style.color = '#F3F2F1';
var element2Body = document.getElementById('spline');
element2Body.style.setProperty('background', this.layoutColor);
}

}
function load(args) {
var selectedTheme = location.hash.split('/')[1];
selectedTheme = selectedTheme ? selectedTheme : 'Fluent2';
args.chart.theme = (selectedTheme.charAt(0).toUpperCase() + selectedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast').replace(/-highContrast/i, 'HighContrast').replace(/5.3/i, '5'));

};
function onPieLoad(args) {
var indexedTheme = location.hash.split('/')[1];
indexedTheme = indexedTheme ? indexedTheme : 'Fluent2';
args.accumulation.theme = (indexedTheme.charAt(0).toUpperCase() + indexedTheme.slice(1).replace(/-dark/i, 'Dark').replace(/contrast/i, 'Contrast').replace(/-highContrast/i, 'HighContrast').replace(/5.3/i, '5'));
};
document.addEventListener('DOMContentLoaded', function () {
var lineObj = document.getElementById('linechart').ej2_instances[0];
var pieObj = document.getElementById('pie').ej2_instances[0];
var splineObj = document.getElementById('spline').ej2_instances[0];
lineObj.refresh(); pieObj.refresh(); splineObj.refresh();
});




.e-dashboardlayout {
padding: 10px;
z-index: 0;
/*background: none;*/
}

.e-panel {
cursor: auto !important;
/*background: none;*/
}

.e-panel-content {
height: calc(100% - 2px) !important;
overflow: hidden;
width: 100%;
}
.e-chart, .e-accumulationchart{
height: inherit !important;
width: inherit !important;
}
.e-panel-header {
background: none;
border: none !important;
height: 10px !important;
display: flex;
align-items: center;
justify-content: center;
}

.template {
height: 100%;
width: 100%;
}

#control-container {
/*background: none;*/
padding: 0px !important;
}

#gradient-chart stop {
stop-color: #2485FA;
}

#gradient-chart1 stop {
stop-color: #FEC200;
}

.ellipse[id*=_Trackball_1] {
stroke-width: 1 !important;
}

.e-chart-focused:focus {
outline: none !important;
}

.title {
font-size: 15px;
font-weight: bold;
color: #737373;
}















@section Scripts {
}



#control-container {
padding: 0px !important;
}



Подробнее здесь: https://stackoverflow.com/questions/795 ... -dashboard