2

複数の円グラフを含むビジュアルがあります (複数の個別の円グラフを含むグラフセットがあります)。各円グラフのサイズが各円のデータのサイズを反映するようにします。たとえば、2010 年の収益が $1,000,000 であることを示す円は、2014 年の収益が $2,000,000 であることを示す円よりも小さくなります。

しかし、サイズ属性は、数字だけを使用するか、数字と「px」を使用するかに関係なく、各パイのサイズに影響を与えないようです。

この機能は実際に円グラフで機能しますか? もしそうなら、誰かがそれを実証できますか。

4

1 に答える 1

5

私は 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>

于 2015-01-28T21:08:38.553 に答える