7

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

点间隔：24 * 3600 * 1000 * 31

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

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 轴值无法正确显示。提前致谢

4

3 回答 3

1

不幸的是，这是不可能的——pointInterval只是按给定的数字递增，所以不可能有不规则的值。不过可以直接设置x-value，见：http: //jsfiddle.net/kUBdb/2/

JS 的好处在于

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

返回 true，因此您可以自由地将月份递增一。

于 2013-07-31T10:12:28.690 回答
1

您可以动态填充 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。

于 2014-09-02T07:36:59.167 回答
0

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

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）

于 2015-01-19T15:36:18.837 回答