javascript - 如何在 Flot 中绘制百分比堆栈图？

Question

我正在使用 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>     

如何修复这个错误

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/