如何：在 highcharts 中限制 xaxis 标签以防止重叠答案

【问题标题】：how to : limit xaxis labels in highcharts to prevent overlap如何：在 highcharts 中限制 xaxis 标签以防止重叠
【发布时间】：2012-07-06 20:08:30
【问题描述】：

我的数据系列点在 firebug 中如下所示：


l false 
r true  
x 1339214400000 //from a mysql datetime
y 0

如何定义我的 xaxis，以便它只显示尽可能多的标签而不重叠？

我已经尝试了 tickInterval、tickPixelInterval 和 dateTimeLabelFormats，但到目前为止没有任何效果。

目前我这样定义我的 xaxis：



xAxis: {
     labels: {
      formatter: function() {
        var date = new Date(this.value);

        return Highcharts.dateFormat('%b %d ', date);
          }
        }

    }

谢谢

【问题讨论】：

你试过只给tickPixelInterval吗？不要定义tickInterval。
是的，目前我什至在没有运气后都不使用。我想知道我的点值的格式（取自 mysql 日期时间）是否有问题，因为我认为 highcharts 自己处理了这个问题。
我在上面编辑了我的代码片段，它们不是我想象的那样——尤其是数据序列点。
当然在这个例子中我只展示了一个恰好有 l == false 的点，但在系列中有些点有 l == true。

标签： highcharts overlap labels axes

【解决方案1】：

这就是我所拥有的，它很丑但似乎有效，我希望避免这种事情......




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);
    });
}

评论？我应该对这种无耻的黑客行为感到满意吗？

【讨论】：

为什么不在第 1 - 11 天使用数组？

【解决方案2】：

我认为下面的代码可以提供帮助

// 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() });

【讨论】：