1

Flotを使用して、クライアント側のphpのグラフをプロットしています。1つのグラフで、パーセントスタックグラフが必要です。Flotにパーセントスタックプラグインと呼ばれるプラグインがあることがわかりました。

グラフをこんな感じにしたいと思います。

予想されるパーセンテージスタック

しかし、プラグインを実装すると、次のようなものが得られます。

実際のパーセンテージスタック

私は彼らの例とその動作を試しました。この問題は、私が渡すJSONデータにあると思います。

私のJSONは次のようになります。

  [{"data":[[-64.483189655172,74.483189655172]],"label":"machine_52"},{"data":[[-142.91077586207,152.91077586207]],"label":"machine_23"},{"data":[[-220.57456896552,230.57456896552]],"label":"machine_90"},{"data":[[-304.05043103448,314.05043103448]],"label":"machine_48"},{"data":[[-388.56163793103,398.56163793103]],"label":"machine_98"}]

X値は稼働時間のパーセンテージであり、Y値はダウンタイムのパーセンテージです。グラフをプロットするには、これらの値を100未満にする必要があります。

私のJSコードは次のようになります。

    <script language="javascript" type="text/javascript">  

$(document).ready(function(){
$.getJSON('barLine.txt', function(json) {

    $.plot($("#placeholder"),json, { series: {
        stackpercent: true,
        bars: { show: true, barWidth: 0.6, fillColor: {colors:[{opacity: 1},{opacity: 1}]}, align: "center" }
    },
    xaxis: {max:100},
    yaxis:{tickSize : 1}});
});
});

</script>

このバグを修正するにはどうすればよいですか

4

1 に答える 1

1

OK ... stackpercentプラグインはデータをどのように変更しますか？これは、同じx値を持つすべてのy値を合計し、それに基づいてパーセンテージを作成することです。

あなたの場合、あなたがしたいのは、2つのシリーズを用意することです。1つはすべての稼働時間の値を持ち、もう1つはすべてのダウンタイムの値を持ちます。それらをマシンごとに並べて、両方のシリーズのx=0がいずれかのマシンのデータになるようにします。

データは次のようになります。

[
     {"label":"Down Time ","data":[[0,64],[1, 142],[2,220],[3,304],[4,388]],"color":"#B41722"},
     {"label":"Running Time","data":[[0, 74], [1, 152],[2,230],[3,314],[4,398]],"color":"#6A9A3C"} 
]

machine_52したがって、データを取得して2つのシリーズの値に分割したことがわかります。-64.xxxxx値は現在[0,64]であり、対応するの74.xxxは2番目のシリーズの[0,74]です。

次に、それを特定のマシンに接続するには、次のxaxis.ticksようなオプションを指定します。

ticks: [[0,'Machine 52'],[1,'Machine 23'],[2,'Machine 90'],[3,'Machine 48'],[4,'Machine 98']]

結果は次のようになります：http： //jsfiddle.net/ryleyb/uSVvu/

于 2012-11-23T16:46:56.713 に答える