Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ruby-on-rails/53.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Highcharts 为什么x轴显示交替月份而不是每个月?_Highcharts - Fatal编程技术网

Highcharts 为什么x轴显示交替月份而不是每个月?

Highcharts 为什么x轴显示交替月份而不是每个月?,highcharts,Highcharts,下面是我的highcharts配置,你能帮我解释为什么我的备用月份即将到来,如果我想每个月都显示,我该怎么做?此外,如果每个月都显示,请更改条形图的宽度 Highcharts.chart("energy_chart", { chart: { type: "column", spacingBottom: 15, spacingTop: 10, spacingLef

下面是我的highcharts配置,你能帮我解释为什么我的备用月份即将到来,如果我想每个月都显示,我该怎么做?此外,如果每个月都显示,请更改条形图的宽度

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
            }
          });
另外,使用向下钻取附加渲染的highchart的屏幕截图

,

现在深入分析图形名称对问题进行排序

编辑:

它变成了一个缩放问题,也就是说,如果我缩放的足够多,那么它会显示所有的点。那么,如何在不放大的情况下显示每个点

工作小提琴:

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

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


API:

Hi Gaurav Kumar,你能为我们提供一些关于这个问题的最简单的实例吗?示例:@ppotaczek我为理解添加了一把小提琴,尽管没有显示第二次向下搜索。首先,谢谢你,伙计。你很有帮助。现在,在一段时间内,它似乎不适用于逐日深入。它可以工作数月,但不适用于向下钻取。嗨,Gaurav Kumar,请检查此示例:,您应该在钻取事件中更新xAxis以获得想要的结果。