Question

我有一个带有jqplot内置滑块的柱形图，但x轴标签未与图表对齐;我希望他们在他们的酒吧下面居中

当有七个小节时问题很糟糕：http://prooffreader.kissr.com/chart/shorter.html

当有26：http://prooffreader.kissr.com/chart/expt.html

时，问题很严重

以下是该页面的代码。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Column graph with slider</title>
<link rel="stylesheet" href="css/jquery.ui.all.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.mouse.js"></script>
<script src="js/ui/jquery.ui.slider.js"></script>
<link rel="stylesheet" href="css/demos.css">

<!-- These were the files required to draw column graphs -->
    <link class="include" rel="stylesheet" type="text/css" href="jqplot/jquery.jqplot.css" />
    <script type="text/javascript" src="jqplot/jquery.jqplot.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>

//start value for year
var start_year=1880;

//end value for year
var end_year=2012;

//function that gets called on loading the page
$(document).ready(function() {
    generate_column_chart(start_year);
});

//function to plot the graph on receiving data
function plot_graph(yearData)
{
    $("#column_graph_div").html("");
    var ticks=['a','b','c','d','e','f','g'];
    var plot1 = $.jqplot("column_graph_div",[yearData], {
        seriesColors:['#01a4ef'], // color of bars 
        seriesDefaults : {
            renderer : $.jqplot.BarRenderer,
            rendererOptions : {
                fillToZero : true,
                barPadding : 0,
                barWidth : 20 // 
            }
        },

        series : [ {
            label : 'total'
        }
         ],

        axes : {
            xaxis : {
                renderer : $.jqplot.CategoryAxisRenderer,
                ticks : ticks,
                tickOptions : {
                fontFamily: 'Arial, Sans',
                fontSize: '9pt'}

            },
            yaxis : {
                pad : 1.5,
                min : 0,

                ticks: [[0,'0'],[20,'20'],[40,'40']],

                tickOptions : {
                    fontFamily: 'Arial, Sans',
                    fontSize: '10pt'

                }

            }
        }


    });
}
//function to generate column chart on slide movement
function generate_column_chart(year)
{
    var input_year="y"+year;
    //alert(input_year);
     $.ajax({
         url: "json/data.json",
         //force to handle it as text
         dataType: "text",
         success: function(data) {
             var json = $.parseJSON(data);
             $.each(json, function(field, value) {
                 //alert("field:"+field);
                if(input_year.trim()==field.trim())
                    {
                        plot_graph(value);
                    }

            });
         }
     });


}
//function that gets called on slider move
$(function() {
    $( "#slider" ).slider({
        value:start_year,
        min: start_year,
        max: end_year,
        step: 1,
        stop: function( event, ui ) {
            generate_column_chart(ui.value);
            $( "#year" ).html( "" + ui.value );
        }
    });
    $( "#year" ).html( "" + $( "#slider" ).slider( "value" ) );
});
</script>

的

Answer 1

类别轴渲染器的常规方法是成对传递数据。

您在yearData发送了类似的内容：

[2.58, 0.75, 1.59, 6.23, 6.32]

相反，你想发送这样的东西：

[['a', 2.58], ['b', 0.75], ['c', 1.59], ['d', 6.23]]

然后还省略了在x轴上使用ticks属性。我认为该属性仅适用于数字刻度。你有字符串（“分类”），我认为这是错位标记的原因。

jqplot柱形图x轴类别标签没有排队

1 个答案: