javascript 如何在 HighChart 中设置每月的 PointIntervals
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17963429/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set PointIntervals per month in HighChart
提问by Satheesh
I used HighCharts to plot number of users created on a monthly basis. I managed to show month in x-axis and i set pointInterval as below
我使用 HighCharts 来绘制每月创建的用户数量。我设法在 x 轴上显示月份，我将 pointInterval 设置如下
pointInterval :24 * 3600 * 1000 * 31
点间隔：24 * 3600 * 1000 * 31
But this was given blindly and it won't plot points correctly. I need to plot points 1st of every month. But the above interval helps to bind points on monthly basis not at the 1st day of month. This exampledescribes my issue. Tooltip gives the clear idea. Here is my code
但这是盲目地给出的，它不会正确地绘制点。我需要在每个月的第一天绘制点。但上述间隔有助于每月绑定点，而不是在每月的第一天。这个例子描述了我的问题。工具提示给出了清晰的思路。这是我的代码
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]
}]
Is there anyway to set pointInterval depends on month. Because if i simply given pointInterval as above it will calculate every 31 days. This creates problem when the month has 28 or 30 days. How to acheive it. Also adjusting the width of the container div makes x-axis values not displaying properly. Thanks in advance
无论如何设置 pointInterval 取决于月份。因为如果我简单地给出上面的 pointInterval 它将每 31 天计算一次。当月份有 28 或 30 天时，这会产生问题。如何实现。还调整容器 div 的宽度会使 x 轴值无法正确显示。提前致谢
采纳答案by Pawe? Fus
Unfortunately it's not possible - pointIntervaljust increments by given number, so irregular value is not possible. However, you can set directly x-value, see: http://jsfiddle.net/kUBdb/2/
不幸的是这是不可能的 -pointInterval只是按给定的数字递增，所以不规则的值是不可能的。但是，您可以直接设置 x 值，请参阅：http: //jsfiddle.net/kUBdb/2/
The good thing about JS is that
JS 的好处在于
Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10)
returns true, so you can freely increment month by one.
返回 true，因此您可以自由地将月份加一。
回答by Joy
You can populate the xaxis value (by month) dynamically and push together with yxais data. The code would be like:
您可以动态填充 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
});
Then the xaxis labels would be 'by month'. Here is the example: JSFiddle.
然后 xaxis 标签将是“按月”。这是示例：JSFiddle。
The idea is imported from here: HighCharts Demo.
这个想法是从这里导入的：HighCharts Demo。
回答by BoVut
You can manually generate date tags and add them to the data list like this:
您可以手动生成日期标签并将它们添加到数据列表中，如下所示：
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)
}]
This way, you can use the pointInterval as is (for approximate view on x-Axis), and use the tag on the chart dots (for the exact data).
这样，您可以按原样使用 pointInterval（用于 x 轴上的近似视图），并使用图表点上的标记（用于精确数据）。
If you zoom into the chart you will see slight overlap between the dots and the x-Axis ticks, but if you don't need perfect alignment this should do the trick.
如果放大图表，您会看到点和 x 轴刻度之间有轻微的重叠，但如果您不需要完美对齐，这应该可以解决问题。
To generate the date tags (e.g. "Jan 1, 2005") I would do something like this:
要生成日期标签（例如“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);
}
Then add each item to the data.
然后将每个项目添加到数据中。
Edited: I think the first answer above is a very neat way to generate date tags. (Check the JSFiddle)
编辑：我认为上面的第一个答案是生成日期标签的一种非常巧妙的方法。（检查JSFiddle）
