0

我可以帮助在 JQPlot 的条形图上正确显示数据吗？图表上的数据在 x 轴上不正确。请参考我在这篇文章底部的图片。

这是我的代码：

    var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: 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:[
        {label:'Hotel'},
        {label:'Event Regristration'},
        {label:'Airfare'}
    ],
    // Show the legend and put it outside the grid, but inside the
    // plot container, shrinking the grid to accomodate the legend.
    // A value of "outside" would not shrink the grid and allow
    // the legend to overflow the container.
    legend: {
        show: true,
        placement: 'outsideGrid'
    },
    axes: {
        // Use a category axis on the x axis and use our custom ticks.
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ['May', 'June', 'July', 'August']
        },
        // 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'}
        }
    }
});

这就是它当前的显示方式：

在此处输入图像描述

4

1 回答 1

0

看到这个，现在它工作正常。我认为问题是由于缺少包含脚本文件

http://jsfiddle.net/JWhmQ/1371/

HTML

<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="https://bitbucket.org/cleonello/jqplot/raw/b5a7796a9ebf/src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>

<div id="CustomerRepeatVisitRatesGraph"></div>

条形图代码

var RepeatVisitRatesGraph = $.jqplot('CustomerRepeatVisitRatesGraph', [[10, 20, 30, 45], [23, 14, 34, 8], [32, 12, 45, 76]], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesDefaults:{
        renderer:$.jqplot.BarRenderer,
        rendererOptions: {fillToZero: 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:[
        {label:'Hotel'},
        {label:'Event Regristration'},
        {label:'Airfare'}
    ],
    // Show the legend and put it outside the grid, but inside the
    // plot container, shrinking the grid to accomodate the legend.
    // A value of "outside" would not shrink the grid and allow
    // the legend to overflow the container.
    legend: {
        show: true,
        placement: 'outsideGrid'
    },
    axes: {
        // Use a category axis on the x axis and use our custom ticks.
        xaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            ticks: ['May', 'June', 'July', 'August']
        },
        // 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-17T03:05:12.183 回答