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 pad 等，但这些似乎没有什么区别。

有谁知道我能做什么？

4

2 回答 2

4

你有两个错误：
- 在情节 '[' 的位置不好
- 添加 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属性吗？IE：

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