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