Question

日期在底部的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/

Answer 1

修改了你的代码，

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

FIDDLE DEMO

只需检查是否可接受，您也可以对Y轴执行相同操作。只是玩标签：{y：-15，rotation：-45，align：'right'}值。你应该完成。

Answer 2

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

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

引用更多格式

Answer 3

使用步骤选项克服xaxis中标签重叠的问题

    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**
        }
    }

Highcharts x轴类别重叠

3 个答案: