Настройка размера круговой диаграммы в ZingChart

Question

У меня есть визуальное изображение, которое включает в себя несколько круговых диаграмм (у меня есть график, содержащий несколько отдельных круговых диаграмм). Я хочу, чтобы размер каждой круговой диаграммы отражал размер данных в каждом пироге. Например, пирог с доходами в 2010 году в размере 1 000 000 долларов будет меньше, чем пирог с доходами в 2014 году в размере 2 000 000 долларов США.

Но атрибут размера, похоже, не влияет на размер каждого пирога, независимо от того, использую ли я только число или число плюс «px».

Эта функция действительно работает для круговых диаграмм? Если да, может кто-нибудь это продемонстрировать.

Answer 1

Я нахожусь в команде ZingChart, и я буду рад помочь вам в этом.

Используя событие datararse, мы можем получить необходимую информацию о графике, которая должна быть отображена, и выполнить соответствующие вычисления и изменения до того, как произойдет рендер. В этом случае нас интересуют значения каждого пирога.

Ниже приведен фрагмент кода для подсчета итогов для каждой круговой диаграммы и создания процентного модификатора. При текущих расчетах наибольший пирог будет иметь размер 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>