highcharts 如何在HighChart中设置每月点数间隔

wgx48brx  于 2022-11-10  发布在  Highcharts
关注(0)|答案(4)|浏览(233)

我使用HighCharts来绘制每月创建的用户数。我设法在x轴上显示月份,并设置如下的pointInterval
点数间隔:24 * 3600 * 1000 * 31
但这是盲目给出的,它不会正确地绘制点。我需要绘制点每月的第一天。但上述间隔有助于绑定点每月的基础上,而不是在每月的第一天。这个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轴值不能正确显示。提前感谢

ruarlubt

ruarlubt1#

这个问题的其他答案已经过时了。
现在,您需要做的就是添加pointIntervalUnit属性。您可以将该属性与pointInterval结合使用,以绘制不规则的间隔:

Highcharts.chart('container', {

...

plotOptions: {
    series: {
        pointStart: Date.UTC(2015, 0, 1),
        pointIntervalUnit: 'month'
    }
},
...

请参阅:https://api.highcharts.com/highcharts/plotOptions.series.pointInterval
还有:https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotoptions/series-pointintervalunit/

nbysray5

nbysray52#

在v4.1.0中引入了series.pointIntervalUnit。使用该选项可以定义点之间的不规则间隔(例如日、月、年)。

旧答案( highcharts 〈4.1.0):

不幸的是,这是不可能的-pointInterval只增加给定的数字,所以不规则的值是不可能的。但是,你可以直接设置x值,请参阅:http://jsfiddle.net/kUBdb/2/
JS的好处是

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

返回true,因此您可以自由地以1为单位增加月份。

xesrikrc

xesrikrc3#

您可以动态填充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
});

则x轴标签将为“按月”。示例如下:JSFiddle
这个想法是从这里导入的:是的。

kkbh8khc

kkbh8khc4#

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

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轴刻度之间有轻微的重叠,但如果您不需要完美对齐,这应该可以做到。
要生成日期标记(例如“Jan 1,2005”),我将执行以下操作:

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)

相关问题