javascript - Highcharts - 当父容器较小时，每月在日期时间 x 轴上显示

Question

我有一个包含 2 条线的 highcharts 图表。 x 轴是日期时间类型。

我想在整个日期范围内的每个月的 x 轴上标记一个刻度:2011 年 7 月、11 年 8 月、11 年 9 月等。

显示所有月度报价的唯一方法是将父容器设置得非常宽。但是，我的生产布局只有一个 695px 的容器。

当我处于较小宽度时，如何强制显示所有刻度？

I have a fiddle here

这是我的代码:

var chart;
var lineIndex = 0,splineIndex=0;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            zoomType: 'xy'
        },
        exporting: { enabled: false },
        title: {
            text: ''
        },
        legend:{
            itemStyle: {
                fontSize: '13px',
                fontFamily: 'Arial,sans-serif'
            }
        },
        xAxis: {
            type: 'datetime',
            min: Date.UTC(2011, 4, 31),
            max: Date.UTC(2012, 11, 6),
            labels: {
                step: 1,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Arial,sans-serif'
                }
            },
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b \'%y',
                year: '%Y'
            }
        },
        yAxis: [{ // Primary yAxis
            labels: {
                style: {
                    fontSize: '13px',
                    fontFamily: 'Arial,sans-serif'
                    },
                formatter: function() {
                    return '$' + Highcharts.numberFormat(this.value,2,'.',",");
                }
            },
            title: {
                text: '',
                style: {
                    color: '#89A54E'
                },
            },
            max:.85,                
            opposite: true   
        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: ''
            },
            min:9000,
            max:12000,
            labels: {
                style: {
                    fontSize: '13px',
                    fontFamily: 'Arial,sans-serif'
                },
                formatter: function() {
                    return '$' + Highcharts.numberFormat(this.value,0,".",",");
                }
            }
        }],
        tooltip: {
            enabled: false
        },
        plotOptions: {
            line: {
                dataLabels: {
                    enabled: true,
                    useHTML: true,
                    formatter: function() {
                        if(this.y == 10000) {
                            return '<div class="tweak">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
                        } else if (this.y > 5) {
                            return '<div class="tweak-0">$' + Highcharts.numberFormat(Math.round(this.y),0,".",",") + '</div>';
                        } else if (this.x == Date.UTC(2011, 11, 1)) { // grab values for special dates and assign tweak classes so we can adjust the label spacing
                            return '<div class="tweak-1">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
                        } else if (this.x == Date.UTC(2012, 1, 1)) { 
                            return '<div class="tweak-2">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
                        } else if (this.x == Date.UTC(2011, 7, 1) || this.x == Date.UTC(2012, 7, 1) ) { 
                            return '<div class="tweak-3">$' + Highcharts.numberFormat(this.y,2,".",",") + '</div>';
                        } else if ( this.x == Date.UTC(2012, 0, 17) ) {
                            return '<div class="tweak-4">$' + Highcharts.numberFormat(this.y,3,".",",") + '</div>';
                        }
                    }}
            }
        },
        credits: {
            enabled: false
        },
        series: [{
            name: 'Growth of $10,000 Investment',
            type: 'line',
            color: '#002d56',
            yAxis: 1,
            data: [
              [Date.UTC(2011, 5, 1), 10000],
              [Date.UTC(2011, 8, 1), 9996],
              [Date.UTC(2011, 11, 1), 10652],
              [Date.UTC(2012, 2, 1), 11387],
              [Date.UTC(2012, 5, 1), 11586],
              [Date.UTC(2012, 8, 1), 11984],
              [Date.UTC(2012, 11, 1), 12179]
            ]
        }, {
            name: 'Historical Distributions Per Share',
            color: '#762123',
            type: 'line',
            enableMouseTracking: false,
            data: [
                [Date.UTC(2011, 5, 1), 0.70],
                [Date.UTC(2011, 6, 1), 0.70],
                [Date.UTC(2011, 7, 1), 0.70],
                [Date.UTC(2011, 8, 1), 0.70],
                [Date.UTC(2011, 9, 1), 0.70],
                [Date.UTC(2011, 9, 25), 0.70],
                [Date.UTC(2011, 10, 1), 0.717],
                [Date.UTC(2011, 11, 1), 0.717],
                [Date.UTC(2012, 0, 10), 0.717],
                [Date.UTC(2012, 0, 17), 0.728],
                [Date.UTC(2012, 0, 24), 0.728],
                [Date.UTC(2012, 0, 31), 0.745],
                [Date.UTC(2012, 1, 1), 0.745],
                [Date.UTC(2012, 1, 28), 0.745],
                [Date.UTC(2012, 2, 6), 0.76],
                [Date.UTC(2012, 2, 13), 0.76],
                [Date.UTC(2012, 2, 20), 0.76], 
                [Date.UTC(2012, 2, 27), 0.76], 
                [Date.UTC(2012, 3, 3), 0.76], 
                [Date.UTC(2012, 3, 10), 0.76],
                [Date.UTC(2012, 3, 17), 0.76], 
                [Date.UTC(2012, 3, 24), 0.76], 
                [Date.UTC(2012, 4, 1), 0.76], 
                [Date.UTC(2012, 4, 8), 0.76], 
                [Date.UTC(2012, 4, 15), 0.76], 
                [Date.UTC(2012, 4, 22), 0.76], 
                [Date.UTC(2012, 4, 29), 0.76], 
                [Date.UTC(2012, 5, 5), 0.76], 
                [Date.UTC(2012, 5, 12), 0.76], 
                [Date.UTC(2012, 5, 19), 0.76], 
                [Date.UTC(2012, 5, 26), 0.76], 
                [Date.UTC(2012, 6, 3), 0.76], 
                [Date.UTC(2012, 6, 10), 0.76], 
                [Date.UTC(2012, 6, 17), 0.76], 
                [Date.UTC(2012, 6, 24), 0.76], 
                [Date.UTC(2012, 6, 31), 0.76],
                [Date.UTC(2012, 7, 1), 0.76],
                [Date.UTC(2012, 7, 7), 0.76], 
                [Date.UTC(2012, 7, 14), 0.76], 
                [Date.UTC(2012, 7, 21), 0.76], 
                [Date.UTC(2012, 7, 28), 0.76], 
                [Date.UTC(2012, 8, 4), 0.76], 
                [Date.UTC(2012, 8, 11), 0.76], 
                [Date.UTC(2012, 8, 18), 0.76], 
                [Date.UTC(2012, 8, 25), 0.76],
                [Date.UTC(2012, 11, 1), 0.76]    
            ],
            marker: {
                enabled: false
            }
        }]
    });
});

Answer 1

您可以添加 tickInterval到 xAxis 属性:

...
tickInterval: 30 * 24 * 3600 * 1000,
...

会出现一些重叠，所以也可能需要 rotate标签一点:

查看此 jsfiddle .