Cách đặt PointIntervals mỗi tháng trong HighChart

Question

Tôi đã sử dụng HighCharts để vẽ số lượng người dùng được tạo hàng tháng. Tôi quản lý để hiển thị tháng ở trục x và tôi đặt pointInterval như sau

pointInterval: 24 * 3600 * 1000 * 31

Nhưng điều này đã được đưa ra một cách mù quáng và nó sẽ không vẽ điểm một cách chính xác. Tôi cần âm mưu điểm 1 của mỗi tháng. Nhưng khoảng thời gian trên giúp gắn các điểm trên cơ sở hàng tháng không phải vào ngày đầu tiên của tháng. Điều này example mô tả vấn đề của tôi. Chú giải công cụ cho ý tưởng rõ ràng. Đây là mã của tôi

series: [{ 
     type: 'area', 
     name: 'CDP Created', 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01),   
     dataGrouping: { 
      enabled: false 
     }, 
     data: [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4] 

    }] 

Có cách nào để đặt pointInterval tùy thuộc vào tháng. Bởi vì nếu tôi chỉ đơn giản là cho pointInterval như trên nó sẽ tính toán mỗi 31 ngày. Điều này tạo ra vấn đề khi tháng có 28 hoặc 30 ngày. Làm thế nào để đạt được nó. Đồng thời điều chỉnh độ rộng của div vùng chứa làm cho các giá trị trục x không hiển thị chính xác. Cảm ơn trước

Answer 1

Rất tiếc, không thể thực hiện được - pointInterval chỉ tăng theo số đã cho, vì vậy không thể thực hiện được giá trị bất thường. Tuy nhiên, bạn có thể đặt trực tiếp x có giá trị, xem: http://jsfiddle.net/kUBdb/2/

Những điều tốt về JS là

Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10) 

trả về true, vì vậy bạn có thể tự do tăng tháng một.

Answer 2

Bạn có thể điền giá trị xaxis (theo tháng) động và đẩy cùng với dữ liệu yxais. Mã sẽ giống như:

var s = {name: 'serial name', data: []}, 
    serialData = [], categories = []; 
var flatData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], 
    startDate = Date.UTC(2000, 1, 1); 
// Set the xaxis value as first day of month 
for (var i = 0; i < flatData.length; i++) { 
    var d = new Date(); 
    d.setTime(startDate); 
    d.setMonth(d.getMonth() + i); 
    categories.push(d.getTime()); 
} 
for (var i = 0; i < flatData.length; i++) { 
    s.data.push([categories[i], flatData[i]]); 
} 
serialData.push(s); 

$('#canvas').highcharts({ 
    ...... 
    xAxis: { 
     type: 'datetime', 
    } 
    serial: serialData 
}); 

Sau đó, nhãn xaxis sẽ là 'theo tháng'. Đây là ví dụ: JSFiddle.

Ý tưởng được nhập từ đây: HighCharts Demo.

Answer 3

Bạn có thể tự tạo ra thẻ ngày và thêm chúng vào danh sách dữ liệu như thế này:

series: [{ 
     data: [["Jan 1, 2005", 0], ["Feb 1, 2005", 0], ..., ["Dec 1, 2005", 54.4]], 
     pointInterval: 24 * 3600 * 1000 * 31, 
     pointStart: Date.UTC(2005, 0, 01)   
    }] 

Bằng cách này, bạn có thể sử dụng pointInterval như là (cho xem xấp xỉ trên x-Axis), và sử dụng trên các chấm biểu đồ (cho dữ liệu chính xác).

Nếu bạn phóng to biểu đồ, bạn sẽ thấy sự chồng chéo nhẹ giữa các dấu chấm và các dấu x-Axis, nhưng nếu bạn không cần sự liên kết hoàn hảo, điều này sẽ thực hiện thủ thuật.

Để tạo thẻ ngày (ví dụ "01 tháng một năm 2005") tôi sẽ làm một cái gì đó như thế này:

var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4]; 
var date = new Date("January 1, 2005"); 
var monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 

for (i = 0; x < data.length; i++) 
{ 
    var stringDate = monthNameList[date.getMonth()] + " 1, " + date.getFullYear(); 
    resultList.push(stringDate); 
    date.setMonth(date.getMonth() + 1); 
} 

Sau đó thêm từng hạng mục cho dữ liệu.

Đã chỉnh sửa: Tôi nghĩ câu trả lời đầu tiên ở trên là cách rất gọn gàng để tạo thẻ ngày. (Kiểm tra JSFiddle)