0

JqPlot を使用して作成された棒グラフがあります。次のようにレンダリングされます。

棒グラフ画像

棒グラフの jQuery コードは次のとおりです。

$(document).ready(function(){

    var plots = [[['US',330]], [['GB',300]], [['IN',230]], [['AU',70]], [['RoW',70]]]
    var plot1 = $.jqplot('TopCountries', plots, {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        animate: true,
            // Will animate plot on calls to plot1.replot({resetAxes:true})
            animateReplot: true,
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true, location: 'n', edgeTolerance: -15 },
            rendererOptions: {
            fillToZero: true,
            barWidth: 15,
            shadow: false
            }
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        series:[

        ],
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                //ticks: ticks
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                //tickOptions: {formatString: '$%d'}
            }
        }
    });
});

これは完璧ですが、バー自体をより厚くしたいと思います. barWidth をより高く変更すると、棒は太くなりますが、左に整列しているように見え、棒がグラフから外れて表示されます。

棒グラフ 2

理想的には、バーが目盛りのすぐ上にあることを望みます。edgeTolerance、fillToZero、yaxis パッドなどをいじってみましたが、違いはないようです。

私に何ができるか知っている人はいますか？

4

2 に答える 2

4

2つのエラーがあります：
-プロット内の'['は適切に配置されていません
-varyBarColorを追加します：true

var plots = [['US',330], ['GB',300], ['IN',230], ['AU',70], ['RoW',70]];
var plot1 = $.jqplot('chartgaugeidentauto', [plots], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
animate: true,
// Will animate plot on calls to plot1.replot({resetAxes:true})
animateReplot: true,
seriesDefaults:{
    renderer:$.jqplot.BarRenderer,
    pointLabels: { 
        show: true, 
        location: 'n', 
        edgeTolerance: -15 
    },
    rendererOptions: {
        fillToZero: true,
        barWidth: 15,
        shadow: false,
        varyBarColor: true
    }
},
// Custom labels for the series are specified with the "label"
// option on the series option.  Here a series option object
// is specified for each series.
series:[
],
axes: {
    // Use a category axis on the x axis and use our custom ticks.
    xaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        //ticks: ticks
    },
    // Pad the y axis just a little so bars can get close to, but
    // not touch, the grid boundaries.  1.2 is the default padding.
    yaxis: {
        pad: 1.05,
        //tickOptions: {formatString: '$%d'}
    }
}
});

結果 ：ここに画像の説明を入力してください

于 2013-01-21T14:03:44.807 に答える
0

barMarginプロパティを減らしてもらえますか? すなわち:

seriesDefaults:{
    renderer:$.jqplot.BarRenderer,
        waterfall:true,
        shadow:true,
        rendererOptions: {
        barWidth:20,
        barMargin:10,
        barPadding:10
    }
}...
于 2013-01-17T14:03:51.377 に答える