Я использую Echarts для визуализации данных, документация мне не понятна; (
В основном мне нужно изменить ширину и высоту диаграммы. Я пытался изменить высоту элемента div круговой диаграммы, нокак следствие, только высота деления изменяется без изменения размеров диаграммы. Если кто-то знает решение, я был бы очень признателен.
<div class="card grid-stack-item-content cd-example" id="dashboard-header">
<div class="card-header container-fluid">
<div class="row dashboard-row">
<div class="col-3 dashboard-icon-div text-center">
<h1 class="dashboard-h1"><i class="fa fa-tags dashboard-logo"></i></h1>
</div>
<div class="col-5">
<h4 class="card-title dashboard-card-title">{{trans('app.icd10_codes')}}</h4>
<h6 class="card-subtitle text-muted">
@if (count($binnedIcds['targetIcds']['codes']) > 0)
<span class="info-box-number">
{{count($binnedIcds['targetIcds']['codes'])}}
{{trans('app.skin_disease_groups')}}
</span>
@endif
</h6>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<div id="pie-chart" style="width:100%; min-height: 500px;"></div>
</div>
</div>
</div>
</div>
NewIcdChart.js
class NewIcdChart
{
constructor(ctx, targetsLabels, othersLabel, undefLabel, targetsTooltips, othersTooltip,
undefTooltip, nTargets, nOthers, nTotal)
{
this.othersColor = '#888888';
this.undefColor = '#cccccc';
var labels = {
targetsLabels,
othersLabel,
undefLabel
};
var tooltips = {
targetsTooltips,
othersTooltip,
undefTooltip,
};
var nTargetImages = nTargets.reduce((a,b) => a + b, 0);
var nUndef = nTotal - nTargetImages - nOthers;
var counts = {
nTargets,
nOthers,
nTotal,
nUndef,
};
this.chart;
this.hasOthers = false;
this.hasUndef = false;
this.drawChart(ctx, labels, tooltips, counts);
}
drawChart(ctx, labels, tooltips, counts){
var otherValue=counts.nOthers;
var otherLabel=labels.othersLabel;
var undefinedValue=counts.nUndef;
var undefinedLabel=labels.undefLabel;
var targetValues=counts.nTargets;
var targetLabels=labels.targetsLabels;
var finalChartValue=[];
for(var i=0; i<targetValues.length; i++){
for(var i=0; i<targetLabels.length; i++){
var obj = {"value": targetValues[i], "name": targetLabels[i]};
finalChartValue.push(obj);
}
}
var otherObject={
value: otherValue,
name : otherLabel
};
var undefinedObject={
value: undefinedValue,
name : undefinedLabel
};
finalChartValue.unshift(otherObject, undefinedObject);
var finalChartLables=[];
finalChartValue.forEach(function(res) {
finalChartLables.push(res.name);
});
function sum(arrayData, key){
return arrayData.reduce((a,b) => {
return {value : a.value + b.value}
})
}
var tempSumObjectElements=sum(finalChartValue);
var sumObjectElements=tempSumObjectElements.value;
var finalPercentage=[];
finalChartValue.forEach(function(res) {
var result=res.value/sumObjectElements *100;
var percentage = result.toFixed(2);
finalPercentage.push(percentage);
});
// specify chart configuration item and data
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)",
},
legend: {
x : 'center',
y : 'bottom',
formatter: function(name) {
var data = this.getSeries()[0].data;
var totalValue = data.reduce((acc, item) => {
acc += item.value;
return acc;
}, 0)
var targetValue;
data.map(item => {
if (item.name == name) {
targetValue = item.value;
}
})
var p = (targetValue / totalValue * 100).toFixed(2);
return name + ' ' + p + '%';
},
data:finalChartLables
},
toolbox: {
show: true,
feature: {
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie']
},
restore: { show: true },
saveAsImage: { show: true }
}
},
color: ["#f62d51", "#dddddd", "#ffbc34", "#7460ee", "#009efb", "#2f3d4a", "#90a4ae", "#55ce63"],
calculable: true,
series: [{
name: 'ICD',
type: 'pie',
radius: [20, 110],
center : ['50%', '50%'],
roseType: 'radius',
itemStyle: {
normal: {
label: {
show: false,
formatter: "{b} : \n ({d}%)",
fontWeight: 100
},
labelLine: {
show: false,
formatter: "{b} : \n ({d}%)",
fontWeight: 100
}
},
emphasis: {
label: {
show: true,
formatter: "{b} : \n ({d}%)",
fontWeight: 100
},
labelLine: {
show: true,
formatter: "{b} : \n ({d}%)",
fontWeight: 100
}
}
},
data: finalChartValue
},
]
};
// use configuration item and data specified to show chart
ctx.setOption(option, true), $(function() {
function resize() {
setTimeout(function() {
ctx.resize()
}, 100)
}
$(window).on("resize", resize), $(".sidebartoggler").on("click", resize)
});
}
}