Question

我的数据系列点在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);
          }
        }

    }

由于

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

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

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

如何：限制高图中的xaxis标签以防止重叠

2 个答案: