0

我在水平显示 JQPlot 堆叠条时遇到问题。

我的代码：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Vertical Graph</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="script/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="script/jqplot.barRenderer.min.js"></script>
    <script type="text/javascript" src="script/jqplot.categoryAxisRenderer.min.js"></script>
    <script type="text/javascript" src="script/jqplot.pointLabels.min.js"></script>
    <link rel="Stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
</head>
<body>
    <div id="test" style="width:auto; height:auto;"></div>
    <script type="text/javascript">
        $(document).ready(function () {
            var s1 = [1, 6, 7, 10];
            var s2 = [3, 5, 3, 4];
            var s3 = [14, 9, 3, 8];
            plot3 = $.jqplot('test', [s1, s2, s3], {
                // Tell the plot to stack the bars.
                stackSeries: true,
                captureRightClick: true,
                seriesDefaults: {
                    renderer: $.jqplot.BarRenderer,
                    rendererOptions: {
                        barDirection: 'horizontal',
                        // Put a 30 pixel margin between bars.
                        barMargin: 30,
                        // Highlight bars when mouse button pressed.
                        // Disables default highlighting on mouse over.
                        highlightMouseDown: true
                    },
                    pointLabels: { show: true }
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                    },
                    yaxis: {
                        // Don't pad out the bottom of the data range.  By default,
                        // axes scaled as if data extended 10% above and below the
                        // actual range to prevent data points right on grid boundaries.
                        // Don't want to do that here.
                        padMin: 0
                    }
                },
                legend: {
                    show: true,
                    location: 'nw',
                    placement: 'inside'
                }
            });
            // Bind a listener to the "jqplotDataClick" event.  Here, simply change
            // the text of the info3 element to show what series and ponit were
            // clicked along with the data for that point.
            $('#chart3').bind('jqplotDataClick',
                function (ev, seriesIndex, pointIndex, data) {
                    $('#info3').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
                }
            );
            $(window).resize(function () {
                plot3.replot({ resetAxes: true });
            });
        });
    </script>
</body>
</html>

抱歉，我不能发布图片，但我没有足够的声誉。

4

1 回答 1

0

谢谢，但我用另一种方式解决了。

这是我的代码：

 axes: {
                xaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                },
                yaxis: {
                    // Don't pad out the bottom of the data range.  By default,
                    // axes scaled as if data extended 10% above and below the
                    // actual range to prevent data points right on grid boundaries.
                    // Don't want to do that here.
                    padMin: 0
                }
            },

在此更改：

axes: {
                yaxis: {
                    renderer: $.jqplot.CategoryAxisRenderer
                    }
            },

所以它有效;）

于 2013-04-18T09:42:58.083 回答