Question

我直接从此网页上的第一个示例复制示例代码：http://www.jqplot.com/tests/bar-charts.php

当我运行代码时，系列标签不能很好地显示在屏幕右侧，就像它们在示例中一样。它们以纯文本形式写入并放在图表的左侧，并与图表重叠。任何人都知道我在这里错过了什么：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Chart Testing</title>
            <script type="text/javascript" charset="utf-8"     src="/DataTables/media/js/jquery-1.10.2.js"></script>
            <script type="text/javascript" src="/jqPlot/jquery.jqplot.min.js"></script>
            <script type="text/javascript" src="/jqPlot/plugins/jqplot.barRenderer.min.js"></script>
            <script type="text/javascript" src="/jqPlot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
            <script type="text/javascript" src="/jqPlot/plugins/jqplot.pointLabels.min.js"></script>

    </head>
<div id="chart1" style="width:600px; height:250px;"></div>

</html>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
    var s1 = [200, 600, 700, 1000];
    var s2 = [460, -210, 690, 820];
    var s3 = [-260, -440, 320, 200];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['May', 'June', 'July', 'August'];

    var plot1 = $.jqplot('chart1', [s1, s2, s3], {
        // 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: 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'}
            }
        }
    });
});
</script>

Answer 1

您需要在页面上包含jqPlot CSS文件

它们应该是您从jqPlot网站下载的ZIP文件。

jqPlot系列标签不显示

1 个答案: