2

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

4

3 回答 3

3

修改了你的代码，

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

小提琴演示

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

于 2013-07-19T05:56:46.377 回答
2

在这里你会看到更好的输出

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

在 x 轴上添加 ,label 作为

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-19T06:05:58.307 回答
0

使用 step 选项来克服 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**
        }
    }
于 2013-10-16T06:43:25.103 回答