jqplot条形图问题

Question

I need help to draq a graph with jqplot. The graph is simple, but jqplot make it complicated. I need to get a graph like this:

.

with some improvements:

The colors are defined here:

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

Some render options are here:

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

and the data I need to render is here:

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

Questions:

1. How to set for each bar a label ('a', 'b', 'c', 'd' etc)?

2. How to move the series to start from left (and not in the middle as now, of course with a small margin on left?

3. The values on y axis, values bigger than 1000 are rendered over the graph lines. How to set a space between axis values and graph?

4. The graph I want to draw is simple. It is possible to obtain the same result without using series? All I want is a bar graph with each bar having a distinct color and displaying a specific label?

Thank you.

Answer 1

See code and comments below. Fiddle here .

Item 2 on your list, I'm unclear about, if you push the plot to the left, you have empty white space on the right. It's better to let the plot fill all the available space.

$(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"
            }
        }
    });
});