javascript - jqplot条形图问题

Question

我需要帮助来用 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]]
       ];

问题：

1. 如何为每个条设置一个标签（'a'、'b'、'c'、'd' 等）？

2. 如何将系列移动到从左侧开始（而不是像现在这样在中间，当然左侧有一个小边距？

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

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

谢谢你。

Answer 1

请参阅下面的代码和注释。在这里拉小提琴。

您列表中的第 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"
            }
        }
    });
});