Question

我使用HighCharts绘制每月创建的用户数。我设法在x轴上显示月份，我将pointInterval设置为如下

pointInterval：24 * 3600 * 1000 * 31

但这是盲目给出的，它不能正确地绘制点。我需要在每个月的第1点绘制积分。但是上述间隔有助于每月绑定点数而不是每月的第1天。这个example描述了我的问题。工具提示给出了清晰的想法。这是我的代码

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]

    }]

无论如何设置pointInterval取决于月份。因为如果我简单地给出如上所述的pointInterval，它将每31天计算一次。当月份有28天或30天时，这会产生问题。如何实现它。同时调整容器div的宽度会使x轴值无法正确显示。提前致谢

Answer 1

不幸的是，这是不可能的 - pointInterval只是递增给定的数字，所以不可能有不规则的值。但是，您可以直接设置x值，请参阅：http://jsfiddle.net/kUBdb/2/

关于JS的好处是

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

返回true，因此您可以逐月自由增量。

Answer 2

您可以动态填充xaxis值（按月），并与yxais数据一起推送。代码就像：

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
});

然后xaxis标签将按月计算。以下是示例：JSFiddle。

这个想法是从这里导入的：HighCharts Demo。

Answer 3

您可以手动生成日期标记，并将其添加到数据列表中，如下所示：

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)         
    }]

这样，您可以按原样使用pointInterval（对于x轴上的近似视图），并使用图表点上的标记（对于确切的数据）。

如果你放大图表，你会看到点和x轴刻度之间有轻微的重叠，但是如果你不需要完美对齐，这应该可以解决问题。

要生成日期标记（例如“2005年1月1日”），我会这样做：

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);
}

然后将每个项目添加到数据中。

编辑：我认为上面的第一个答案是生成日期标记的一种非常简洁的方法。（检查JSFiddle）

如何在HighChart中每月设置PointIntervals

3 个答案: