为什么X轴显示交替的月份而不是每个月？

Question

以下是我的图表配置，您能帮我解释为什么我的隔月要来吗？如果我想每个月显示一次，该怎么做？另外，如果每个月显示一次，则要更改栏的宽度。

Highcharts.chart("energy_chart", {
            chart: {
              type: "column",
              spacingBottom: 15,
              spacingTop: 10,
              spacingLeft: 10,
              spacingRight: 10,
              backgroundColor: "#f2f2f2",
              events: {
                load: function() {
                  var fin = new Date();
                  var finDate = fin.getDate();

                  var finMonth = fin.getMonth();
                  var finYear = fin.getFullYear();

                  var ini = new Date();
                  ini.setFullYear(ini.getFullYear() - 1);
                  var iniDate = ini.getDate();
                  var iniMonth = ini.getMonth();
                  var iniYear = ini.getFullYear();
                  if (this.yAxis[0].dataMax == 0) {
                    this.yAxis[0].setExtremes(null, 1);
                  }
                  //this.yAxis.set
                  console.log(new Date(Date.UTC(iniYear, iniMonth, iniDate)))
                  console.log(new Date(Date.UTC(finYear, finMonth, finDate)))
                  this.xAxis[0].setExtremes(
                    Date.UTC(iniYear, iniMonth, iniDate),
                    Date.UTC(finYear, finMonth, finDate)
                  );
                },

                drilldown: function(e) {
                  console.log('drilldown')
                  var charts_this = this;
                  var inidrillDate = new Date(e.point.x);

                  setTimeout(function() {
                    inidrillDate.setDate(0);
                    inidrillDate.setMonth(inidrillDate.getMonth());
                    var DateinidrillDate = inidrillDate.getDate();
                    var MonthinidrillDate = inidrillDate.getMonth();
                    var YearinidrillDate = inidrillDate.getFullYear();
                    var findrillDate = inidrillDate;
                    findrillDate.setMonth(findrillDate.getMonth() + 1);
                    findrillDate.setDate(findrillDate.getDate() - 1);
                    var DatefindrillDate = findrillDate.getDate();
                    var MonthfindrillDate = findrillDate.getMonth();
                    var YearfindrillDate = findrillDate.getFullYear();
                    console.log(Date.UTC(
                      YearinidrillDate,
                      MonthinidrillDate,
                      DateinidrillDate
                    ))
                    console.log(Date.UTC(
                      YearfindrillDate,
                      MonthfindrillDate,
                      DatefindrillDate
                    ))
                    charts_this.xAxis[0].setExtremes(
                      Date.UTC(
                        YearinidrillDate,
                        MonthinidrillDate,
                        DateinidrillDate
                      ),
                      Date.UTC(
                        YearfindrillDate,
                        MonthfindrillDate,
                        DatefindrillDate
                      )
                    );

                    if (charts_this.yAxis[0].dataMax === 0) {
                      charts_this.yAxis[0].setExtremes(null, 1);
                    }
                  }, 0);

                }
              }
            },
            title: {
              text: '<p className="energy_gen">Energy Generated</p>'
            },
            exporting: { enabled: false },
            xAxis: {
              type: "datetime",
              labels: {
                step: 1
              },
              dateTimeLabelFormats: {
                day: "%e"
              }
            },
            yAxis: {
              title: {
                text: "kWh"
              }
            },
            credits: {
              enabled: false
            },
            plotOptions: {
              series: {
                cursor: "pointer",
                dataLabels: {
                  enabled: true,
                  format: "{point.y}"
                },
                color: "#fcd562",
                point:{
                  events:{
                    click:function(event){
                      }     
                    }
                  }
                }
              }
            },
            tooltip: {
              formatter: function() {
                if (this.point.options.drilldown) {
                  return (
                    "Energy generated: <b> " +
                    this.y +
                    "</b> kWh " +
                    "<br>" +
                    Highcharts.dateFormat("%b %Y", new Date(this.x))
                  );
                } else {
                  return (
                    "Energy generated: <b> " +
                    this.y +
                    "</b> kWh " +
                    "<br>" +
                    Highcharts.dateFormat("%e %b %Y", new Date(this.x))
                  );
                }
              }
            },
            series: [{'data':obj.data,'name':obj.name,"color":"#4848d3"}],
            drilldown: {
              series: obj.data
            }
          });

此外，还通过钻取附加渲染的高位图表的屏幕截图。

，

现在向下钻取图（同样是问题）

编辑：

事实证明这是一个缩放问题，即如果我缩小得足够多，那么它将显示所有点。因此，如何在不显示出动物的情况下显示每个点。

工作小提琴：

http://jsfiddle.net/gkumar77/w9ngp63u/5/

Answer 1

使用tickInterval属性并将其设置为一个月：

        xAxis: {
          type: "datetime",
          tickInterval: 30 * 24 * 3600 * 1000,
          labels: {
            step: 1
          },
          dateTimeLabelFormats: {
            day: "%e"
          }
        }

实时演示：http://jsfiddle.net/BlackLabel/q5coany2/

API：https://api.highcharts.com/highcharts/xAxis.tickInterval