在ZingChart中設置餅圖的大小

我有一個包含多個餅圖（我有一個包含多個獨立餅圖的graphset）的視覺效果。我希望每個餅圖的大小都能反映每個餅圖中數據的大小。例如，顯示2010年收入爲1,000,000美元的餡餅將小於顯示2014年收入爲2,000,000美元的餡餅。在ZingChart中設置餅圖的大小

但是size屬性似乎對每個餅圖的大小沒有影響，無論我只使用數字還是數字加「px」。

此功能是否適用於餅圖？如果是這樣，有人可以證明這一點。

來源

2015-01-01 Mark Salamon

我在ZingChart團隊，我很樂意幫助你解決這個問題。

使用dataparse事件，我們可以檢索有關要呈現的圖表的必要信息，並在呈現之前進行適當的計算和修改。在這種情況下，我們對每個派的價值感興趣。

下面的代碼片段將統計每個餅圖的總數並生成一個百分比修飾符。在目前的計算中，最大的派將有100％的大小，而最大派的價值的一半的派將是50％。如果你願意，你當然可以改變它。

哦，如果這太過分了，可以通過在每個圖表的「plot」對象中設置「size」屬性來硬編碼每個餅圖的大小。如果右鍵單擊並查看圖表來源，您可以看到這是由我的函數計算得出的。這些值可以是百分比值或以像素爲單位的數值。

讓我知道如果您有任何問題！

// 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>

來源

2015-01-28 21:08:38 Stalfos

在ZingChart中設置餅圖的大小

回答

相關問題