如何绘制多个条形图按类别按flot js分组 [英] how to draw multiple bar charts grouped by category with flot js

问题描述

我使用flot库来显示条形图，我需要按照这种方式分组一定的值：

  | 
 | + ---- + + ---- + 
 | | | | | 
 | | | | | 
 | | | | | 
 | + ---- + | | | | 
 | | | | | | | 
 | | | | | | | 
 | | | | | | | 
 |  -  + ---- + --- + ---- + -------- + ---- + ---- 
 val 1 val2 val3 
 category＃1 category＃2 
  

谢谢Sergey G.为Ascii：）

我有变量d1，d2，d3分别为条1,2和3的值（按类别排序）。
问题是：
如何添加下面的类别？

代码：

pre> $。plot（
$（＃placeholder），
[

{
label：labelChart，
data：d1，
color：'＃92d5ea'，
bars：{
show：true，
barWidth：0.5，
align： ，
order：2
}，

multiplebars：true
}，
{
标签：labelChart，
数据： d2，
color：'＃92d5ea'，
bars：{
show：true，
barWidth：0.5，
align：center，
order：3
}，

multiplebars：true
}，
{
label：labelChart，
data：d3，
color：'＃92d5ea'，
bars：{
show：true，
barWidth：0.5，
align：center，
order：3
}，

multiplebars：true
}


]，
{
xaxis：{
ticks：ticksData
}，

yaxis：{
min：0
}
}
）;


解决方案

使用类别插件，如此示例。

I'm using flot library to display a bar charts and I need to group by certain value in this way:

|
|          +----+        +----+    
|          |    |        |    |    
|          |    |        |    |    
|          |    |        |    |    
| +----+   |    |        |    |    
| |    |   |    |        |    |    
| |    |   |    |        |    |    
| |    |   |    |        |    |    
|-+----+---+----+--------+----+----
   val 1    val2          val3
    category #1        category #2

Thanks Sergey G. for the Ascii :)

I have the variables d1, d2, d3 to the values ​​of the bars 1, 2 and 3 respectively (sorted by category). The question is: How do I add the category below ticks? Sorry for my bad "Google-Translator" English and thank you very much!

Code:

$.plot(
    $("#placeholder"),
    [

            {
        label: labelChart,
        data: d1,
        color: '#92d5ea',
        bars: {
            show: true,
            barWidth: 0.5,
            align: "center",
            order:2
        },   

       multiplebars:true  
    },
    {
        label: labelChart,
        data: d2,
        color: '#92d5ea',
        bars: {
            show: true,
            barWidth: 0.5,
            align: "center",
            order:3
        },   

       multiplebars:true  
    },
    {
        label: labelChart,
        data: d3,
        color: '#92d5ea',
        bars: {
            show: true,
            barWidth: 0.5,
            align: "center",
            order:3
        },   

       multiplebars:true  
    }


    ],
    {
        xaxis: {
            ticks: ticksData
        }, 

        yaxis: { 
            min:0
        }
    }
);

解决方案

Use the categories plugin, as demonstrated in this example.

这篇关于如何绘制多个条形图按类别按flot js分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！