当数据由秒的单击事件确定时,如何向下钻取到第三级?

时间:2019-02-01 13:03:30

标签: reactjs highcharts react-highcharts

所以,我一直在试图利用深入到多个层面,我现在面临的问题是,我不能深入到第三级,因为该数据将通过在第二钻取的选择AJAX牵强。

例如,请参考此链接:

https://codepen.io/ajaymalhotra15/pen/aZpxXq

drilldown example

在这里,第三级是可能的,因为他已经有了数据,但是我的将取决于秒的选择。

那么,如何实现这一点,我应该在哪里调用ajax请求并动态设置下钻系列数据?

编辑:

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

                  this.xAxis[0].setExtremes(
                    Date.UTC(iniYear, iniMonth, iniDate),
                    Date.UTC(finYear, finMonth, finDate)
                  );
                },

                drilldown: function(e) {
                  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();

                    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){
                     if(this.options!=null){
                        var dayOfYear=new Date(this.x).getFullYear() +"-"+(new Date(this.x).getMonth()+1)+"-"+new Date(this.x).getDate();
                      var formatted_date = new Date(this.x).getDate() + " " + months[(new Date(this.x).getMonth())] +" "+ new Date(this.x).getFullYear();
                      // document.getElementById('chart_date_id').innerHTML = formatted_date;       //setting modal title with current date
                        $('#container').bind('mousemove touchmove touchstart', function (e) {

                          var chart,
                          point,
                          i,
                          event;
                          var sync_charts = $('.chart');
                          for (i = 0; i < sync_charts.length; i = i + 1) {

                            var chart_1 = sync_charts[i];
                            var chart_2 = chart_1.getAttribute('data-highcharts-chart');
                            chart=Highcharts.charts[chart_2];
                            event = chart.pointer.normalize(e.originalEvent);
                            point = chart.series[0].searchPoint(event, true);

                            if (point) {
                              point.highlight(e);
                            }
                          }
                        });
                        Highcharts.Pointer.prototype.reset = function () {

                          return undefined;
                        };
                        Highcharts.Point.prototype.highlight = function (event) {

                          event = this.series.chart.pointer.normalize(event);
                          this.onMouseOver(); // Show the hover marker
                          this.series.chart.tooltip.refresh(this); // Show the tooltip
                          this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
                        };
                        function syncExtremes(e) {

                          var thisChart = this.chart;

                          if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
                            Highcharts.each(Highcharts.charts, function (chart) {
                              if (chart !== thisChart) {
                                if (chart.xAxis[0].setExtremes) { // It is null while updating
                                  chart.xAxis[0].setExtremes(
                                      e.min,
                                      e.max,
                                      undefined,
                                      false,
                                      { trigger: 'syncExtremes' }
                                  );
                                }
                              }
                            });
                          }
                        }
                      axios({
                        url: config.fvcstat,
                        method: "POST",
                        data: {
                          "customerId":self.props.location.state.detail.customerId,"rmsVendorId":self.props.location.state.detail.rmsVendorId,
                          "date":dayOfYear,
                          "powerType":self.props.location.state.detail.powerType
                        },
                        headers: {
                          "Content-Type": "application/json"
                        }
                      }).then((res)=>{
                        let activity = fvc.data;
                        if($('.chart')){
                          $('.chart').remove();
                        }
                        $.each(activity.datasets, function (i, dataset) {
                          console.log(1)
                          var chartDiv = document.createElement('div');
                          chartDiv.className = 'chart';
                          document.getElementById('container').appendChild(chartDiv);
                          Highcharts.chart(chartDiv,{
                            chart: {

                            },
                            plotOptions: {
                              series: {
                                marker:{
                                  enabled:false
                                }
                              }
                            },
                            exporting: { enabled: false },
                            title: {
                              text: dataset.name,
                              align: 'left',
                              margin: 0,
                              x: 30
                            },
                            credits: {
                              enabled: false
                            },
                            legend: {
                              enabled: false
                            },
                            xAxis: {
                              crosshair:{ width: 3},
                              events: {
                                setExtremes: syncExtremes
                              },
                              labels: {
                                format: '{value}'
                              },categories: activity.xData
                            },
                            yAxis: {
                              title: {
                                text: null
                              }
                            },
                            series: [{
                              data: dataset
                            }],
                            tooltip: {
                              positioner: function () {
                                return {
                                  x: this.chart.chartWidth - this.label.width,
                                  y: 10 // align to title
                                };
                              },
                              borderWidth: 0,
                              backgroundColor: 'none',
                              pointFormat: '{point.y}',
                              headerFormat: '',
                              shadow: false,
                              style: {
                                fontSize: '18px'
                              },
                              valueDecimals: dataset.valueDecimals
                            },
                            series: [{
                              data: dataset.data,
                              name: dataset.name,
                              type: dataset.type,
                              color: Highcharts.getOptions().colors[i],
                              fillOpacity: 0.3,
                              tooltip: {
                                valueSuffix: ' ' + dataset.unit
                              }
                            }]
                          });
                        });

                      })
                      }     
                    }
                  }
                }
              }
            },
            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
            }
          });

因此,在这里,如果您在plotoptions中注意到,我正在尝试创建一个全新的图表,该图表是显示频率,电压和电流的同步线形图。

但是,我想我的方法不正确,因为我正在绘制新的图表。 因此,如何使此同步的折线图成为我的向下钻取的一部分。

如果您需要任何帮助以了解我,请告诉我。

我建议首先最小化plotoption。然后扩展以进一步他妈的:P

谢谢。

1 个答案:

答案 0 :(得分:1)

您可以将所有逻辑用于获取第三级数据并在drilldown事件中创建下钻系列:

chart: {
    type: 'column',
    events: {
        drilldown: function(e) {
            if (!thirdLevel.length) {
                // get data
            }
            if (!e.seriesOptions) {
                var chart = this,
                    drilldowns = {
                        'Animals': {
                            name: 'Animals',
                            data: [
                                ['Cows', 2],
                                ['Sheep', 3]
                            ]
                        },
                        'Fruits': {
                            name: 'Fruits',
                            data: [
                                ['Apples', 5],
                                ['Oranges', 7],
                                ['Bananas', 2]
                            ]
                        },
                        'Cars': {
                            name: 'Cars',
                            data: [
                                ['Toyota', 1],
                                ['Volkswagen', 2],
                                ['Opel', 5]
                            ]
                        }
                    },
                    series = drilldowns[e.point.name];

                chart.addSingleSeriesAsDrilldown(e.point, series);
                chart.applyDrilldown();
            }
        }
    }
}

实时演示:http://jsfiddle.net/BlackLabel/86v3L4ft/

API参考:https://api.highcharts.com/highcharts/chart.events.drilldown