如何：限制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); 
      } 
     }
 
    }

感谢

来源

2012-07-06 lost baby

您是否尝试过只给tickPixelInterval？不要定义tickInterval。 – 2012-07-07 04:33:25

是的，目前我甚至没有运气后都没有使用。我想知道我的分值的格式（取自mysql日期时间）是否是问题，因为我认为highcharts本身处理了这个问题。 – 2012-07-09 13:13:27

我上面编辑了我的代码片段，它们不是我认为的 - 特别是数据序列点。 – 2012-07-09 13:32:47

这里是我有什么，它是丑陋的，但似乎工作，我希望避免这种事情......




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

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

来源

2012-07-09 17:07:52

为什么不在第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() });

来源

2012-07-23 16:48:32 CSR

如何：限制x轴标签在highcharts防止重叠

回答

相关问题