Question

我有一个包含多个饼图的视觉效果（我有一个包含多个独立饼图的图表集）。我希望每个饼图的大小反映每个饼图中数据的大小。例如，2010年收入为1,000,000美元的馅饼将小于显示2014年收入2,000,000美元的馅饼。

但是size属性似乎对每个馅饼的大小没有影响，无论我只使用数字还是数字加上＆＃34; px＆＃34;。

这个功能实际上适用于饼图吗？如果是这样，有人可以证明它。

Answer 1

我是ZingChart团队的成员，我很乐意帮助你解决这个问题。

使用dataparse事件，我们可以检索有关要呈现的图表的必要信息，并在呈现之前进行适当的计算和修改。在这种情况下，我们对每个馅饼的价值感兴趣。

下面的代码段会计算每个饼图的总计并生成百分比修饰符。根据目前的计算，最大的馅饼大小为100％，馅饼的大小只有最大馅饼的一半，为50％。如果您愿意，您当然可以更改此设置。

哦，如果这太过分了，你可以通过设置＆＃34; size＆＃34;来硬编码每个馅饼的大小。＆＃34;情节中的属性＆＃34;每个图表的对象。如果右键单击并查看图表源，您可以看到我的函数计算出的结果。值可以是百分比值，也可以是大小的数值（以像素为单位）。

如果您有任何疑问，请与我联系！

＆＃13;

// 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
});

＆＃13;

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='chartDiv'></div>

＆＃13;

在ZingChart中设置饼图的大小

1 个答案: