javascript - 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']
                }
            }
        }
    });

});