我正在绘制一个大轴刻度图表，如＆＃34;美国的ameriaca＆＃34; 。 当多个长标记开始重叠时，问题出现了，所以我编写了一个代码来实现选框，这样当鼠标悬停在标记上时可能会滚动，否则它可能只显示它的几个字符。我想要做的是通过在jquery中包装一个元素。但是这些div正在逐一放置。我需要并排。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> MyEXP#Scroll</title>
<script type='text/javascript' src="jquery.js"></script>
</head>
<body>
<script language="javascript" type="text/javascript" src="jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.dateAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.cursor.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.highlighter.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasTextRenderer.js"></script>
<script language="javascript" type="text/javascript" src="plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script language="plugins/jqplot.pointLabels.js"></script>
<script language="javascript" type="plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="plugins/jqplot.enhancedLegendRenderer.js"></script>
<div id="chart1" style="width:600px; height:400px"></div>
<div id=".jqplot-mytick">
<div id=".jqplot-xaxis-tick" >
</div>
</div>
<div id="tick"></div>
</body>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css">
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function(){
ticks = ['India is a land of cultural diversity', 'Nepal is famous for its natural beauty', 'United States Of America is a federal system', 'Netherlands has moderate climate', 'United Nation Org', 'srilankaisgood despite of its internal conflict'];
data = [];
// var dataForAxis2 = [132.19,2.99,6.09,50.38,1.44,4.4];
for (i = 0; i < 10; i++)
{
line = []; // data for Axis 1
line1=[]; // data for Axis 2
for (j = 0; j < ticks.length; j++)
{
line.push(Math.random());
line1.push(ticks[i]);
}
data.push(line);
data.push(line1);
}
var opts = {
title:{
text: 'Scroll@JQPlot',
textColor: '#d8b83f'
},
// -------------------------------Pt1 series colours Begin-------------------
seriesColors: [ "#ffffff", "#c5b47f", "#EAA228", "#579575", "#839557", "#958c12",
"#953579", "#4b5de4", "#d8b83f", "#ff5800", "#0085cc"],
// -------------------------------- Pt 1 series colors Ends---------------------
axesDefaults: {
// tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
mark: 'outside', // Where to put the tick mark on the axis
// 'outside', 'inside' or 'cross',
showMark: true,
showGridline: true, // wether to draw a gridline (across the whole grid) at this tick,
markSize:4, // length the tick will extend beyond the grid in pixels. For
// 'cross', length will be added above and below the grid boundary,
show: true, // wether to show the tick (mark and label),
showLabel: true, // wether to show the text label at the tick,
formatString: '', // format string to use with the axis tick formatter
},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: { autoscale:true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Population Density -1',
//--------------------------------pt2 Y axis title1 rotation & color Begin-----------------
renderer: $.jqplot.LogAxisRenderer , // pt2 Y axis title rotation
//Label color Point 3
labelOptions:{
textColor: '#d8b83f',
}
//--------------------------------pt2 Y axis title1 rotation& color ends---------------------
},
y2axis: {
autoscale:true,
//-----------------------------------pt2 Yaxis title 2 rotation & color begins---------------------------
labelRenderer: $.jqplot.CanvasAxisLabelRenderer, //pt 2 Y axis title rotation
label: 'Population Density-2',
//Label color Point 3
labelOptions:{
textColor: '#F0000F',
}
//-----------------------------------pt2 Yaxis title 2 rotation $ color ends---------------------------
},
},
series:[ {yaxis:'yaxis', label:'dataForAxis2' },
{yaxis:'y2axis', label:'dataForAxis2'},
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'},
{label:'Helicopter'},
{label:'Hotel a_1092'},
{label:'Event Regristrationb_1298289821sdsdsd'},
{label:'Airfare'},
{label:'Helicopter'},
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'},
{label:'Helicopter'},
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'},
{label:'Helicopter'},
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'},
{label:'Helicopter'},
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'},
{label:'Helicopter'},
//labels for axis 2
{label:'tourism'},
{label:'food'},
{label:'lodge'},
{label:'stay'},
{label:'Lion'},
{label:'Tiger'},
{label:'Limca'},
{label:'Coke'},
{label:'Genius'},
{label:'Thumsup'},
{label:'Police'},
{label:'Progs'},
{label:'Keys'},
{label:'dingo'},
{label:'Bingo'},
{label:'xingo'},
{label:'wow1'},
{label:'delta2'},
{label:'Alpha1'},
{label:'Bravo2'},
{label:'delta3'},
{label:'Bravo3'},
{label:'Airfare'},
{label:'Charlie'},
],
legend:{
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
//numberRows:0,numberColumns:1,
//show: true,location:'s',placement:'outside'
},
highlighter: {
show: true,
sizeAdjust: 7.5,
},
cursor: {
show: false
},
};
plot1 = jQuery.jqplot ('chart1', data, opts);
var legendTable = $($('.jqplot-table-legend')[0]);
legendTable.css('display','block');
legendTable.css('z-index',100);
legendTable.css('height','100px');
legendTable.css('width','100px');
legendTable.css('overflow-y','scroll');
legendTable.css('overflow-x','scroll');
//--------------code for ticks overlap:: @Ashwni--------------------------//
console.log("ticks length"+ticks.length);
for (var i = 0; i < ticks.length; i++){
var len=ticks[i].length;
console.log("len of a tick"+len);
console.log($($('.jqplot-xaxis-tick')[i]).css('width'));
//-------------calculation of factor Delta---------//
var delta = parseInt($($('.jqplot-xaxis-tick')[i]).css('width'))/(len);
console.log("delta"+delta*len);
//-------------Delta calculation ends ------------//
($($('.jqplot-xaxis-tick')[i])).wrap('<div id="#chartdiv0" style="width:80px; height:10px; border:1px solid; overflow-x:hidden;float:left;position:absolute">');
};
//---------------------------Tick overlap ends@Ashwni-------------------//
for (var i = 0; i < ticks.length; i++){
//scroll(i);
plot(i);
}
function plot(i){
$($('.jqplot-xaxis-tick')[i]).css('z-index',100);
$($('.jqplot-xaxis-tick')[i]).bind('mouseover', function () {
var m= '-webkit-marquee';
$($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
}).bind('mouseout', function () {
var m= '';
$($('.jqplot-xaxis-tick')[i]).css('overflow-x',m);
});
}
//$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
function scroll(i){
var tWidth = '50px'; // width (in pixels)
var tHeight = '25px'; // height (in pixels)
var tcolour = '#ffffcc'; // background colour:
var moStop =true; // pause on mouseover (true or false)
var fontfamily = 'arial,sans-serif'; // font for content
var tSpeed = 3; // scroll speed (1 = slow, 5 = fast)
// enter your ticker content here (use \/ and \' in place of / and ' respectively)
//var content = 'Are you looking for loads of useful information <a href="http:\/\/javascript.about.com\/">About //Javascript<\/a>? Well now you\'ve found it.';
var content =$($('.jqplot-xaxis-tick')[i]);
console.log(($('.jqplot-xaxis-tick')[i]));
var cps = -tSpeed;
var aw, mq;
var fsz = parseInt(tHeight) - 4;
function scrollticker() {
mq.style.right = (parseInt(mq.style.right) > (-10 - aw)) ? mq.style.right = parseInt(mq.style.right) + cps + "px" : parseInt(tWidth) + 10 + "px";
}
function startticker() {
if (document.getElementById) {
var tick = '<div style="position:relative;width:' + tWidth + ';height:' + tHeight + ';overflow:hidden;background-color:' + tcolour + '"';
if (moStop) tick += ' onmouseover="cps=0" onmouseout="cps=-tSpeed"';
tick += '><div id="mq" style="position:absolute;right:0px;top:0px;font-family:' + fontfamily + ';font-size:' + fsz + 'px;white-space:nowrap;"><\/div><\/div>';
document.getElementById('ticker').innerHTML = tick;
mq = document.getElementById("mq");
mq.style.right = (10 + parseInt(tWidth)) + "px";
mq.innerHTML = '<span id="tx">' + content + '<\/span>';
aw = document.getElementById("tx").offsetWidth;
lefttime = setInterval(scrollticker, 50);
}
}
startticker();
window.onload = startticker;};
//$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
//----Code for adding Ticks Name@ToolTip-----------
$("#chart1").bind('jqplotMouseMove', function(ev, gridpos, datapos, neighbor, plot) {
if (neighbor) {
$(".jqplot-highlighter-tooltip").html("" + plot.axes.xaxis.ticks[neighbor.pointIndex] + ", " + datapos.yaxis.toFixed(2));
}
});
})
})
</script>
</html>