Question

我有一个经典的折线图，其中包含x轴的每周日期。

但如果我输入很多值，则底部的日期不可读（太近）。

$(function () { 
$('#container').highcharts({ 
    xAxis: {
        tickInterval:  7 * 24 * 3600 * 1000,
        type: 'datetime', 
        labels: {
            format: '{value:%d/%m/%Y}',
            rotation: -45,
            y: 30,
            align: 'center'
        } 
    }, 
    plotOptions: {
        series: {
            pointStart: Date.UTC(2012, 4, 4),
            pointInterval: 7 * 24 * 3600 * 1000
        }
    },

    series: [{ 
        data: [29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4]
    }]
});

http://jsfiddle.net/mf9Eg/

您知道是否可以智能地分发这些值？当它们距离太近时，例如只显示一对二。

感谢。

Answer 1

您可以使用标签的step属性。试试下面的代码。

labels: {
            format: '{value:%d/%m/%Y}',
            rotation: -45,
            y: 30,
            align: 'center',
            step:3
        }

Answer 2

我通常做的是确定我有多少数据点，然后相应地调整tickInterval。您将其设置为硬编码值。您需要找出最适合您的方法，具体取决于您拥有的数据点数，xAxis标签的对齐/旋转以及这些标签上使用的字体。

Highchart - xAxis值将关闭

2 个答案: