Highcharts x轴类别重叠

日期在底部的x轴栏中重叠。解决这个问题的最佳解决方案是什么？Highcharts x轴类别重叠

如果日期计数超过13，那么我没有任何类别标签，但我至少需要鼠标悬停点上的日期。

我试过格式化函数，但它不起作用，它给了我数字而不是日期范围。

xAxis: { 
     categories:{ 
      formatter: function() { 
       ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013'] 
      } 
     } 
},

我已经包括一个jsfiddle来向你展示它的外观。

http://jsfiddle.net/8eTnE/

来源

2013-07-19 prospector

已修改了代码，

 tickInterval : 2, 
     labels : { y : -15, rotation: -45, align: 'right' }

FIDDLE DEMO

只要检查是可以接受的，你可以为Y轴做同样也是。只需使用标签：{y：-15，旋转：-45，align：'right'}值。你应该完成。

来源

2013-07-19 05:56:46

这里你可以看到更好的输出

http://jsfiddle.net/8eTnE/2/

中添加图表，标签，x轴为

labels: { 
        rotation: -45, 
        align: 'right' 

       }

适当增加mmarginbottom 75为

marginBottom: 75

这里是完整的代码

$(function() { 

     var curdateVar = "04/01/2013"; 
     var dateinreq = "04/01/2013"; 
     var csdataArr = null; 
     //var data = [0,0,0,0,0,0,0]; 
     var data1 = new Array(6); 
     var data2 = new Array(6); 


     var chart; 
     $(document).ready(function() { 
      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'containermain', 
        type: 'line', 
        backgroundColor: { 
         linearGradient: [0, 0, 250, 500], 
         stops: [ 
                    [0, '#bbb'], 
                    [0.05, '#fff'], 
                    [1, 'white'] 
         ] 
        }, 
        borderColor: '#000000', 
        borderWidth: 2, 
        className: 'dark-container', 
        marginRight: 130, 
        marginBottom: 75 
       }, 
       title: { 
        text: 'Activity Stats', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: 'Calories Burned', 
        x: -20 
       }, 
       xAxis: { 
        categories: ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013'] 
        ,labels: { 
       rotation: -45, 
       align: 'right' 

      } 
         }, 
         yAxis: { 
          title: { 
           text: 'Calories' 
          }, 
          min: 0, 
          max: 2000, 
          tickInterval: 50, 
          plotLines: [{ 
           value: 0, 
           width: 1, 
           color: '#808080' 
          }] 
         }, 
         tooltip: { 
          formatter: function() { 
           // return ''; 
           return '<b>' + this.series.name + '</b><br/>' + 
           this.x + ': ' + this.y + 'cals'; 
          } 
         }, 
         legend: { 
          layout: 'vertical', 
          align: 'right', 
          verticalAlign: 'top', 
          x: -10, 
          y: 100, 
          borderWidth: 0 
         }, 
         series: [{ 
          name: 'Activity', 
          data: [120  ,473  ,473  ,0   ,142  ,509  ,296  ,398  ,558  ,136  ,98  ,330  ,355  ,289  ] 
         /* data: data1]*/ 
        }] 
        }); 
       }); 

    });

指从Demo

来源

2013-07-19 06:05:58 Bhaarat

使用步骤选项更多格式，以克服在x轴

xAxis: { 
     categories:{ 
      formatter: function() { 
       ['5/16/2013','7/1/2013','7/3/2013','7/2/2013','7/4/2013','7/6/2013','7/7/2013','7/8/2013','7/15/2013','5/22/2013','7/9/2013','7/10/2013','7/11/2013','7/13/2013'] 
      } 
     }, 
     labels: { 
      **step: 2** 
     } 
    }

标签重叠的问题

来源

2013-10-16 06:43:25 shammerw0w

Highcharts x轴类别重叠

回答

相关问题