如何堆叠订单条形图

时间:2016-05-09 15:50:50

标签: jquery flot

我想创建一个堆积条形图,每个x轴应该有一个带有总柱栏的堆叠条,以便进行比较。

我在堆积条上有3个图例,旁边有一个总列。这可能吗?

数据

[{"label":"All","data":[{"0":1433113200000,"1":0},{"0":1435705200000,"1":0},{"0":1438383600000,"1":0},{"0":1441062000000,"1":0},{"0":1443654000000,"1":4},{"0":1446336000000,"1":8},{"0":1448928000000,"1":10},{"0":1451606400000,"1":20},{"0":1454284800000,"1":41},{"0":1456790400000,"1":78},{"0":1459465200000,"1":176},{"0":1462057200000,"1":360}],"bars":{"order":0},"idx":0},{"label":"P3","data":[{"0":1433113200000,"1":0},{"0":1435705200000,"1":0},{"0":1438383600000,"1":0},{"0":1441062000000,"1":0},{"0":1443654000000,"1":0},{"0":1446336000000,"1":2},{"0":1448928000000,"1":4},{"0":1451606400000,"1":2},{"0":1454284800000,"1":7},{"0":1456790400000,"1":0},{"0":1459465200000,"1":12},{"0":1462057200000,"1":28}],"bars":{"order":1},"stack":true,"color":"#ffa500","idx":1},{"label":"P2","data":[{"0":1433113200000,"1":0},{"0":1435705200000,"1":0},{"0":1438383600000,"1":0},{"0":1441062000000,"1":0},{"0":1443654000000,"1":0},{"0":1446336000000,"1":0},{"0":1448928000000,"1":0},{"0":1451606400000,"1":0},{"0":1454284800000,"1":0},{"0":1456790400000,"1":2},{"0":1459465200000,"1":31},{"0":1462057200000,"1":136}],"bars":{"order":1},"stack":true,"color":"#f00","idx":2}]

选项

{"series":{"bars":{"show":true,"fill":1,"align":"center","barWidth":1296000000,"lineWidth":0}},"xaxis":{"mode":"time","autoscaleMargin":null,"tickSize":[1,"month"],"format":"%m %y","ticks":null},"yaxis":{"min":0,"tickDecimals":0,"minTickSize":2},"grid":{"clickable":true,"hoverable":true},"legend":{"noColumns":3,"position":"ne"}}

1 个答案:

答案 0 :(得分:1)

  

这可能吗?

是的,我相信这可以使用jquery.flot.stack.js插件。

请参阅how-to-make-jquery-flot-stacked-chart

上的此示例