jquery / javascript / unix绘图，x轴上的子类别

Question

我想知道我可以使用哪种工具/程序包创建可以在x轴上放置多个子类别的图形。 这与Excel图形中的功能非常相似。

例如：

Apple| Oranges| WaterMelon | Bittermelon | Cucumbers | Lotus Root
    Fruits                 |       Vegetables    

Answer 1

jqPlot是一个可以进行分组的jQuery插件。

此代码将生成以下图像：

$(document).ready(function(){
    $.jqplot.config.enablePlugins = true;

    var line1 = [20, 10, 20, 30, 40, 50];
    var xticks = ['Apples', 'Oranges', 'Watermelons', 'Bittermelon', 'Cucumbers', 'Lotus Root'];
    var plot1 = $.jqplot('chart1', [line1], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
                groups: 2,
            } 
        },
        axes:{
            xaxis:{
                renderer:$.jqplot.CategoryAxisRenderer,
                ticks: xticks,
                rendererOptions: {
                    groupLabels:['Fruits', 'Vegetables']
                }
            }
        }
    });

});