如何在Flot中绘制百分比叠加图？

Question

我正在使用Flot为我的客户端php绘制图表。在一张图中，我需要Percentage Stack Graph，我发现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值是DownTime百分比。绘制图形时，这些值应小于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>     

如何修复此错误

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