Javascript jqplot条形图问题

我需要帮助用jqplot绘制一个图形。这个图很简单，但是jqplot使它变得复杂。 我需要得到这样一张图：

经过一些改进：

颜色定义如下：

graphColors = ['#048ff1', '#79b924', '#ffa600', '#ef5257', '#7b279b', '#8ff104',
               '#b92479', '#5257ef', '#279b7b', '#f1048f', '#00ffa6', '#9b7b27']

以下是一些渲染选项：

seriesDefaults: {
    seriesColors: graphColors,
    renderer: $.jqplot.BarRenderer,
    rendererOptions: { barDirection: 'vertical' }
    },
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: [ /* to be filled in automatically */ ]
        },
    xaxis: {
        min: 0
        }
    }

我需要渲染的数据如下：

//in the image I used instead of letters '1'
data = [[['a', 1112]],
        [['b', 1127]],
        [['c', 822]],
        [['d', 1039]]
       ];

问题:

如何为每个条设置标签（“a”、“b”、“c”、“d”等）

< L> > P>如何从左开始移动（而不是在中间开始，当然左边有一个小边距）

y轴上的值，大于1000的值在图形线上呈现。如何设置轴值和图形之间的间距

我想画的图形很简单。不使用序列就可以得到相同的结果？我想要的只是一个条形图，每个条形图都有不同的颜色，并显示特定的标签

---

谢谢。

请参阅下面的代码和注释。Fiddle

清单上的第2项，我不清楚，如果你把绘图推到左边，右边就有空白。最好让绘图填满所有可用的空间

$(document).ready(function(){

   var graphColors = ['#048ff1', '#79b924', '#ffa600', '#ef5257', '#7b279b', '#8ff104',
           '#b92479', '#5257ef', '#279b7b', '#f1048f', '#00ffa6', '#9b7b27'];

   var data = [
        [1112],
        [1127],    
        [822],
        [1039]];

    var ticks = ['This is how to tick'];

    plot2 = $.jqplot('chart1', data, {
        seriesColors: graphColors, 
        seriesDefaults: {                
            renderer:$.jqplot.BarRenderer
        },
        axesDefaults:{pad: 1.3}, // Item 2, increase this padding so labels are cut off
        // Item 4, no, jqplot treats each differently colored bar as a series, so you must provide series options
        series:[
            {pointLabels:{show:true,labels:['a']}}, // Item 1, the label for each bar is the "labels" array 
            {pointLabels:{show:true,labels:['b']}},
            {pointLabels:{show:true,labels:['c']}},
            {pointLabels:{show:true,labels:['d']}}
        ],
        axes: {                
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks // comment this out for "autoticks"
            }
        }
    });
});

---

你说这是一个如此简单的图形，但却列出了你需要的非常具体的调整。在上面的第2条上，如果图形没有居中，你想在右边有很多空白吗？应该很简单。我无法想象一个比条形图更简单的图形，其中每个条形图都是一对[标签，值].我需要所有图形向左对齐。条形图的数量可能会有所不同。在两个条形图之间，我需要定义距离（现在假设为30px）。也应该是左填充-第一个栏和yaxis之间的距离。感谢mark的回答。关于第二个问题：我需要将图表向左对齐，即使这意味着右侧有大量可用空间。每个栏应该有固定的大小（宽度）两条线之间的距离应该是固定的。左边的空间仍然是空的。你知道如何从字符串数组中动态设置pointLabels值吗？我在一个单独的函数中构建该部分，并将其作为参数传递给$.jqplot函数。我有一个单独的函数，它使用一些参数为我构建jqplot选项。所以类似于

series=$.map（['a'，'b'，'c'，'d']），函数（i）{return（{pointLabels:{show:true，labels:[i]}}）}）

？