Javascript jqplot柱形图x轴类别标签未对齐
我有一个在jqplot中内置滑块的柱状图，但是x轴标签没有与图表对齐；我希望他们在酒吧下面居中 当有七个条时，问题很严重： 如果有26个，问题就很严重： 这是页面的代码Javascript jqplot柱形图x轴类别标签未对齐,javascript,charts,jqplot,Javascript,Charts,Jqplot,我有一个在jqplot中内置滑块的柱状图，但是x轴标签没有与图表对齐；我希望他们在酒吧下面居中 当有七个条时，问题很严重： 如果有26个，问题就很严重： 这是页面的代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Column graph with slider</title> <link rel="stylesheet"
<!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>
带滑块的柱状图
//年度起始值
风险值起始年=1880；
//年度末价值
var年末=2012年；
//加载页面时调用的函数
$（文档）.ready（函数（）{
生成列图（起始年）；
});
//函数在接收数据时绘制图形
函数图（年数据）
{
$（“#column_graph_div”）.html（“”）；
var ticks=['a'、'b'、'c'、'd'、'e'、'f'、'g']；
变量plot1=$.jqplot（“柱状图”和[yearData]{
系列颜色：['#01a4ef']，//条的颜色
系列默认值：{
渲染器：$.jqplot.blunderer，
渲染器选项：{
是的，
barPadding:0，
条宽：20//
}
},
系列：[{
标签：“总计”
}
],
轴线：{
xaxis：{
渲染器：$.jqplot.CategoryAxisRenderer，
滴答声：滴答声，
选择：{
fontFamily:'Arial，Sans'，
fontSize:'9pt'}
},
亚克斯：{
pad:1.5，
分:0,，
记号：[[0，'0']，[20，'20']，[40，'40']，
选择：{
fontFamily:'Arial，Sans'，
字体大小：“10磅”
}
}
}
});
}
//用于在幻灯片移动时生成柱状图的函数
函数生成列图（年）
{
var输入_year=“y”+年份；
//警报（输入年份）；
$.ajax({
url:“json/data.json”，
//强制将其作为文本处理
数据类型：“文本”，
成功：功能（数据）{
var json=$.parseJSON（数据）；
$.each（json，函数（字段，值）{
//警报（“字段：+字段”）；
如果（输入_year.trim（）==field.trim（））
{
绘图图（值）；
}
});
}
});
}
//在滑块移动时调用的函数
$（函数（）{
$（“#滑块”）.滑块({
价值：起始年，
敏：今年开始，
马克斯：年底，
步骤：1，
停止：功能（事件、用户界面）{
生成列图（ui.value）；
$（“#年”）.html（“+ui.value”）；
}
});
$（“#年”）.html（“+$（“#滑块”）.slider（“值”））；
});
使用类别轴渲染器的正常方法是成对传递数据 您正在
yearData[2.58, 0.75, 1.59, 6.23, 6.32]
[['a', 2.58], ['b', 0.75], ['c', 1.59], ['d', 6.23]]
ticks