如何:限制x轴标签在highcharts防止重叠
问题描述:
我的数据系列点是这样的萤火:如何:限制x轴标签在highcharts防止重叠
l false
r true
x 1339214400000 //from a mysql datetime
y 0
如何定义我的x轴,因此只会显示尽可能多的标签,因为它可以不重叠?
我试过tickInterval,tickPixelInterval和dateTimeLabelFormats,但没有任何工作到目前为止。
目前我定义我的x轴,像这样:
xAxis: {
labels: {
formatter: function() {
var date = new Date(this.value);
return Highcharts.dateFormat('%b %d ', date);
}
}
}
感谢
答
这里是我有什么,它是丑陋的,但似乎工作,我希望避免这种事情......
function loadAreaChartForNewsletters(report) {
var metric = $("#chartSelect :selected").text();
$("#gaChartLabel").html(metric);
$("#gaChartNote").html("");
charts.area.showLoading();
var start = new Date($("#gaFromDate").val());
var end = new Date($("#gaToDate").val());
postSynchronous({
action : "getAnalytics",
report : report,
start : start.strftime("%Y-%m-%d"),
end : end.strftime("%Y-%m-%d")
}, function(data) {
// Empty the current chart and load new data
charts.area.hideLoading();
destroyCharts("area");
if (checkForErrors(data)) return;
var pointsopens = data.pointsopens.data;
var pointsclicks = data.pointsclicks.data;
var total = 0;
var openstotal = 0;
var clickstotal = 0;
var length = 0;
for (var i in pointsopens) openstotal += pointsopens[i].y;
for (var i in pointsclicks) clickstotal += pointsclicks[i].y;
if (pointsopens.length > pointsclicks.length) length = pointsopens.length;
else length = pointsclicks.length;
if (openstotal > clickstotal) total = openstotal;
else total = clickstotal;
$("#gaChartNote").html("Newsletter Open and Click events detected in " + timeDiffToStr(end-start));
var numdays = Math.floor((end-start)/(1000*60*60*24));
var days1 = Math.floor(numdays/8);
var days2 = Math.floor(numdays/8)*2;
var days3 = Math.floor(numdays/8)*3;
var days4 = Math.floor(numdays/8)*4;
var days5 = Math.floor(numdays/8)*5;
var days6 = Math.floor(numdays/8)*6;
var days7 = Math.floor(numdays/8)*7;
var days8 = Math.floor(numdays/8)*8;
var days9 = Math.floor(numdays/8)*9;
var days10 = Math.floor(numdays/8)*10;
var days11 = Math.floor(numdays/8)*11;
var currday=0;
var plotLinesopen = createPlotlinesForNewsletters(pointsopens, '#AAAAAA');
var plotLinesclick = createPlotlinesForNewsletters(pointsclicks, '#DDDDDD');
config.pointIndex = null;
config.areaPoints = new Array();
config.areaPoints[0] = plotLinesopen;
config.areaPoints[1] = plotLinesclick;
var options = {
chart : { renderTo : 'areaChart' },
stacking: 'normal',
title: {
text: 'Open and Click events'
},
xAxis: {
labels: {
formatter: function() {
var date = new Date(this.value);
if(numdays > 7){//show 8 dates on xaxis
currday++;
if(currday == days1 ||
currday == days2 ||
currday == days3 ||
currday == days4 ||
currday == days5 ||
currday == days6 ||
currday == days7 ||
currday == days8 ||
currday == days9 ||
currday == days10 ||
currday == days11 ){
return Highcharts.dateFormat('%b %d ', date);
}
return '';
}else{
return Highcharts.dateFormat('%b %d ', date);
}
}
}
},
yAxis: {
title: {
text: 'Newsletter Events'
},
},
series : [ data.pointsopens, data.pointsclicks ]
};
if (length > 100) {
options.plotOptions = {
area : {
lineWidth: 1,
marker : { radius : 1 }
}
};
}
options = jQuery.extend(true, {}, areaChartDefault, options);
charts.area = new Highcharts.Chart(options);
});
}
评论?我应该对这种无耻的黑客感到满意吗?
+0
为什么不在第1 - 11天使用数组? – Simon 2012-07-24 07:56:59
答
我想下面的代码可以帮助
// iCount refers number of records, I am limiting total number of records to 10 here
if (iCount >= 10)
iCount = (iCount + 10)/10;
LineChart1.YAxis.Add(new YAxisItem { title = new Title("Values") });
LineChart1.XAxis.Add(new XAxisItem { tickInterval = iCount,
title = new Title("Date"),
categories = CopyString(0)
.Where(c => c != null).ToArray() });
您是否尝试过只给tickPixelInterval?不要定义tickInterval。 – 2012-07-07 04:33:25
是的,目前我甚至没有运气后都没有使用。我想知道我的分值的格式(取自mysql日期时间)是否是问题,因为我认为highcharts本身处理了这个问题。 – 2012-07-09 13:13:27
我上面编辑了我的代码片段,它们不是我认为的 - 特别是数据序列点。 – 2012-07-09 13:32:47