JqPlot 条形图 - 条形位置卡在左侧答案

【问题标题】：JqPlot Bar Chart - Bar Position Stuck to LeftJqPlot 条形图 - 条形位置卡在左侧
【发布时间】：2012-09-29 16:02:35
【问题描述】：

我有一个使用 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 更改为更高，则条形确实会变粗，但似乎与左侧对齐，导致条形出现在图表之外，例如

理想情况下，我希望条形图刚好位于刻度线上方。我玩过 edgeTolerance、fillToZero、yaxis pad 等，但这些似乎没有什么区别。

有人知道我能做什么吗？

【问题讨论】：

标签： jquery jqplot bar-chart

【解决方案1】：

你有两个错误：
- 在地块中'['没有很好地放置
- 添加variableBarColor: 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'}
    }
}
});

结果：

【讨论】：

【解决方案2】：

你能减少 barMargin 属性吗？即：

seriesDefaults:{
    renderer:$.jqplot.BarRenderer,
        waterfall:true,
        shadow:true,
        rendererOptions: {
        barWidth:20,
        barMargin:10,
        barPadding:10
    }
}...

【讨论】：