行名称重叠

Question

我创建散点图http://jsfiddle.net/ashwinp/4aDQ2/1/

这里排名称重叠对方？并点开始从该行的中间画name.Why不能我们先从行名称的开始？

我可以知道如何解决这个问题吗？

下面是代码提前

var InfluenceCnt=0; 
var QResiduals=[]; 
var XLables=[]; 
var HottelingT2=[]; 
var EllipseChartData; 
var EllipseShift; 
QResiduals.push('0.5356899'); 
QResiduals.push('0.3356899'); 
QResiduals.push('0.6356899'); 
QResiduals.push('0.2356899'); 
QResiduals.push('0.8356899'); 
QResiduals.push('0.2356899'); 
QResiduals.push('0.4356899'); 
QResiduals.push('0.4356899'); 
QResiduals.push('0.4356899'); 
QResiduals.push('0.2356899'); 
QResiduals.push('0.2356899'); 
QResiduals.push('0.5356899'); 
QResiduals.push('0.8356899'); 
QResiduals.push('0.9356899'); 
QResiduals.push('0.5356899'); 
QResiduals.push('0.7356899'); 
QResiduals.push('0.2356899'); 
QResiduals.push('0.1356899'); 
QResiduals.push('0.0356899'); 
QResiduals.push('0.5356899'); 
QResiduals.push('0.8356899'); 
QResiduals.push('0.7356899'); 

HottelingT2.push('0.1') 
HottelingT2.push('0.2'); 
HottelingT2.push('0.3'); 
HottelingT2.push('0.4'); 
HottelingT2.push('0.5'); 
HottelingT2.push('0.6'); 
HottelingT2.push('0.4') 
HottelingT2.push('0.5'); 
HottelingT2.push('0.3'); 
HottelingT2.push('0.2'); 
HottelingT2.push('0.6'); 
HottelingT2.push('0.7'); 
HottelingT2.push('0.8') 
HottelingT2.push('0.9'); 
HottelingT2.push('0.2'); 
HottelingT2.push('0.3'); 
HottelingT2.push('0.5'); 
HottelingT2.push('0.5'); 
HottelingT2.push('0.7') 
HottelingT2.push('0.8'); 
HottelingT2.push('0.9'); 
HottelingT2.push('0.4'); 
HottelingT2.push('0.5'); 
HottelingT2.push('0.6'); 

XLables.push('abc') 
XLables.push('bdef'); 
XLables.push('ceff'); 
XLables.push('ddds'); 
XLables.push('edf'); 
XLables.push('fdf'); 
XLables.push('abc') 
XLables.push('bdef'); 
XLables.push('ceff'); 
XLables.push('dddsert'); 
XLables.push('edf'); 
XLables.push('fdf'); 
XLables.push('abcert') 
XLables.push('bdefert'); 
XLables.push('ceffert'); 
XLables.push('retret'); 
XLables.push('edfert'); 
XLables.push('fdfret'); 
XLables.push('bdefert'); 
XLables.push('ceff'); 
XLables.push('ddds'); 
XLables.push('edf'); 
XLables.push('fdf'); 

$(function() { 
      $(document).ready(function() {   
       Highcharts.setOptions({ 
        global: { 
         useUTC: false 
        } 
       }); 
    // Ellipse Plot 
      EllipseChartData = new Highcharts.Chart({ 
        chart: { 
         renderTo: 'EllipseContainer', 
         type: 'scatter', 
         marginRight: 10, 
         zoomType: 'xy', 
         events: { 
          load: function() {        

           // set up the updating of the chart each second 
           EllipseSeries = this.series[0];         
            setInterval(function() {          
            EllipseShift = EllipseSeries.data.length > 20;       

            if (!isNaN(QResiduals[InfluenceCnt]) && $.isNumeric(QResiduals[InfluenceCnt]) && typeof (QResiduals[InfluenceCnt]) != "undefined") { //alert(QResiduals[InfluenceCnt]); 
             var x = HottelingT2[InfluenceCnt], // current time 
              y = parseFloat(QResiduals[InfluenceCnt]);  
             InfluenceCnt++;                   
             EllipseSeries.addPoint([x,y], true, EllipseShift);           
             }          
           }, 1000); 
          } 
         } 
        }, 
        title: { 
         text: 'Ellipse Plot' 
        }, 
        xAxis: { 
         title: { 
          text: 'Sample' 
         }, 
         categories:XLables, 
         plotLines: [{       
          value:2.5, 
          color: 'red', 
          dashStyle: 'shortdash', 
          width: 2, 
          label: { 
           text: '' 
          } 
         }] 
        }, 
        yAxis: { 
         title: { 
          text: '' 
         }, 
         plotLines: [{        
          value: 0.4, 
          color: 'red', 
          dashStyle: 'shortdash', 
          width: 2, 
          label: { 
           text: '' 
          } 
         }] 
        }, 
        tooltip: { 
         formatter: function() { 
          return '<b>' + this.series.name + '</b><br/>X: ' + 
         this.x + '<br/> Y: ' + 
         Highcharts.numberFormat(this.y, 2); 
         } 
        }, 
        legend: { 
         enabled: false 
        }, 
        exporting: { 
         enabled: true 
        }, 
        series: [{ 
         name: 'Ellipse Plot', 
         data: [] 
        }] 
       }); 


      }); 

     }); 

感谢。

Answer 1

宽度有限，所以标签重叠，因为“没有空间”包含“边距/填充”。您可以尝试useHTML为真：http://api.highcharts.com/highcharts#xAxis.labels.useHTML，然后使用格式（）http://api.highcharts.com/highcharts#xAxis.labels.formatter用即

return '<div class="ownlabel">'+this.value+'</div>'; 

然后使用自己的CSS样式定义“ownlabel”。

Answer 2

问题是您正在使用类别，因此Highcharts不会阻止任何重叠。我建议使用标准的x轴与格式化，一起来看看：http://jsfiddle.net/TEDBG/

    xAxis: { 
        allowDecimals: false, 
        labels: { 
          formatter: function() { 
           return XLables[this.value]; 
          } 
        }  
       }