在Highcharts分組日期如果日期範圍太大

我使用Highcharts表現出一定的統計我的客戶，但我有問題，當客戶選擇長期數據範圍在Highcharts分組日期如果日期範圍太大

這裏是我在highchart第一圖像默認視圖 enter image description here

，如果我選擇過長的日期範圍下面是結果 enter image description here

這裏是我的代碼

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'line', 
       marginRight: 50, 
       marginBottom: 80, 
       dataGrouping: { 
        enabled: true 
       } 
      },     
      title: { 
       text: 'Visits Statistics', 
       x: -20 //center 
      }, 
      credits: { 
       text: '', 
       href: '' 
      }, 
      subtitle: { 
       text: '', 
       x: -20 
      }, 
      xAxis: { 
       categories: [<?php print $categories; ?>], 
       labels: { 
        rotation: -45, 
        align: 'right', 
        style: { 
         fontSize: '10px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }, 
      yAxis: { 
       title: { 
        text: 'Visits' 
       }, 
       min: 0, 
       plotLines: [{ 
        value: 0, 
        width: 1, 
        color: '#808080' 
       }] 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.x +' '+'</b><br/>'+ this.y +'Hit'; 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'top', 
       x: -10, 
       y: 10, 
       borderWidth: 0 
      }, 
      series: [{name:'from 2011-09-1',data: [<?php print $visits; ?>]}] 
     }); 
    }); 
});

來源

2013-08-22 Man Mann

那麼究竟什麼是你的問題？它看起來像你想要解決的X軸標籤問題 - 他們重疊像瘋了似的。那是對的嗎？ –

@ManiacalMonkey是完全相同。我需要的是組數月或數週或數年 –

你有沒有使用之前軸標籤的格式化？ –

如果圖表配置正確，Highcharts可以自動管理x軸中的時間值。在你的情況的問題是，你告訴Highcharts使用你的類別，它顯示所有的類別。

要設置您的圖表，以避免這種情況，你需要做兩兩件事：

將X軸類型datetime
確保您的數據格式正確無誤
- 或者，如果您不能掌握數據，請使用pointStart和pointInterval。

使用你的例子：

// ... 
xAxis: { 
    //remove categories and set type as 'datetime' 
    type: 'datetime', 
    labels: { 
     rotation: -45, 
     align: 'right', 
     style: { 
      fontSize: '10px', 
      fontFamily: 'Verdana, sans-serif' 
     } 
    } 
}, 
// ... 
series: [{ 
    name:'from 2011-09-1', 
    // since you probably don't want to change your data, we leave it alone... 
    data: [<?php print $visits; ?>], 
    // ... and instead, set `pointStart` and `pointInterval` 
    pointStart: Date.UTC(2011, 8, 1), // September 1, 2011 
    pointInterval: 24 * 3600 * 1000 // each point is 1 day (measured in milliseconds) 
}]

來源

2013-08-23 23:49:49 NT3RP

在Highcharts分組日期如果日期範圍太大

回答

相關問題