여러 원형 차트가 포함 된 시각적 효과가 있습니다 (여러 개의 별도 원형 차트가 포함 된 그래프 세트가 있음). 각 원형 차트의 크기가 각 원형의 데이터 크기를 반영하도록합니다. 예를 들어 2010 년 매출 1,000,000 달러를 보여주는 파이는 2014 년 매출 2,000,000 달러를 보여주는 파이보다 작을 것입니다.ZingChart에서 원형 차트의 크기 설정
그러나 size 속성은 숫자 나 숫자에 "px"를 사용할지 여부에 관계없이 각 파이의 크기에 아무런 영향을 미치지 않는 것으로 보입니다.
사실이 기능은 파이 차트에서 작동합니까? 그렇다면 누군가 그것을 증명할 수 있습니까?
저는 ZingChart 팀에 있습니다. 저는이 문제에 대해 기꺼이 도와 드리겠습니다.
dataparse 이벤트를 사용하여 렌더링 할 차트에 대한 필요한 정보를 검색하고 렌더링이 발생하기 전에 적절한 계산 및 수정을 수행 할 수 있습니다. 이 경우 각 파이 값에 관심이 있습니다.
아래 코드 스 니펫은 각 원형 차트의 합계를 계산하고 백분율 수정자를 생성합니다. 현재 계산에서 가장 큰 파이는 100 %의 크기를 가지며, 가장 큰 파이의 값의 정확히 절반의 파이는 50 %입니다. 원한다면 물론 변경할 수 있습니다.
아, 너무 과도한 경우 각 차트의 '플롯'개체에 '크기'속성을 설정하여 각 원형의 크기를 하드 코딩 할 수 있습니다. 마우스 오른쪽 버튼을 클릭하고 차트 소스를 보면 내 함수에 의해 계산 된 것으로 볼 수 있습니다. 값은 백분율 값 또는 크기 (픽셀 단위) 일 수 있습니다.
질문이 있으시면 알려주세요.
// Dataparse is called when the data is ready for the chart
zingchart.dataparse = function (p, d) {
console.log(d);
// Get number of series in graphset, initialize array of 0s
var seriesLength=d.graphset.length;
var total = new Array(seriesLength);
while(seriesLength--) total[seriesLength] = 0;
// Calculate the sum of the values in each series (each pie)
for (var n = 0; n < d.graphset.length; n++) {
for (var m = 0; m < d.graphset[n].series.length; m++) {
total[n] += d.graphset[n].series[m].values[0];
}
}
// Find the largest value in the array of totals
var largest = Math.max.apply(Math, total);
// Calculate % modifier based off of largest value for each pie chart
for (var n=0;n<d.graphset.length;n++){
var sizeModifier=(total[n]/largest)*100;
// Apply the size modifier to the plot object of each pie chart.
d.graphset[n].plot.size = sizeModifier + '%';
}
// Return modified chart object to be rendered.
return d;
}
var oData = {
"layout": "h",
"graphset": [{
"type": "pie",
"plotarea": {
"margin": "0 40"
},
"plot": {
"value-box": {
'visible': 1,
"text":"%v"
}
},
"series": [{
"values": [169]
}, {
"values": [151]
}, {
"values": [142]
}, {
"values": [125]
}]
}, {
"type": "pie",
"plotarea": {
"margin": "0 40"
},
"scaleX": {
},
"scaleY": {
},
"plot": {
"value-box": {
'visible': 1,
"text":"%v"
}
},
"series": [{
"values": [120]
}, {
"values": [89]
}, {
"values": [87]
}, {
"values": [147]
}]
}]
};
zingchart.render({
id: 'chartDiv',
data: oData,
width: 800,
height: 400
});<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='chartDiv'></div>