首页 文章

JqPlot条形图 - 酒吧位置被困在左边

提问于
浏览 次
0

我有一个使用JqPlot创建的条形图 . 它呈现如下：

Bar Chart Image

这是条形图的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更改为更高，则条形会变得更厚，但是似乎与左边对齐，导致条形图显示在图形之外，例如

Bar Chart 2

理想情况下，我希望酒吧位于蜱虫上方 . 我玩过edgeTolerance，fillToZero，yaxis pad等，但这些似乎没什么区别 .

谁知道我能做什么？

jquery jqplot bar-chart

2 回答

  • 0

    你有两个错误：

    • 在情节'['没有很好的位置
    • 添加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'}
    }
}
});

    结果：
    enter image description here

    回复于
  • 4

    你能减少 barMargin property 吗？即：

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

相关问题