1

我正在使用 Flot 为我的客户端 php 绘制图表。在一个图中，我需要百分比堆栈图，我发现 Flot 中有一个名为Percentage Stack Plugin的插件。

我希望我的图表是这样的。

预期百分比堆栈

但是当我实现插件时，我得到了类似的东西。

实际百分比堆栈

我尝试了他们的示例并且工作正常。我认为这个问题与我传递的 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

好的... stackpercent 插件如何更改您的数据？它所做的是将具有相同 x 值的所有内容的 y 值相加，然后根据该值创建百分比。

对于您的情况，您想要做的是有两个系列，一个包含所有正常运行时间值，一个包含所有停机时间值。您在每台机器上排列它们，因此两个系列中的 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数据分成两个系列的-64.xxxxx值，现在的值[0,64]和它对应74.xxx的是第二个系列中的[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 回答