Question

我有问题。我的图形有6个系列，其中3个属于下X轴，另外3个属于上X轴。问题在于，属于上X轴的系列未在导航器中显示。这导致在修改范围时，这些系列“中断”。这是证据：

此外，我希望2轴的点对齐（每个系列中的点数相同）。

谢谢！

代码：

def forward(self, features, rois):
        batch_size, num_channels, data_height, data_width = features.size()
        num_rois = rois.size()[0]
        outputs = Variable(torch.zeros(num_rois, num_channels, self.pooled_height, self.pooled_width)).cuda()

        for roi_ind, roi in enumerate(rois):
            batch_ind = int(roi[0].data[0])
            roi_start_w, roi_start_h, roi_end_w, roi_end_h = np.round(
                roi[1:].data.cpu().numpy() * self.spatial_scale).astype(int)
            roi_width = max(roi_end_w - roi_start_w + 1, 1)
            roi_height = max(roi_end_h - roi_start_h + 1, 1)
            bin_size_w = float(roi_width) / float(self.pooled_width)
            bin_size_h = float(roi_height) / float(self.pooled_height)

            for ph in range(self.pooled_height):
                hstart = int(np.floor(ph * bin_size_h))
                hend = int(np.ceil((ph + 1) * bin_size_h))
                hstart = min(data_height, max(0, hstart + roi_start_h))
                hend = min(data_height, max(0, hend + roi_start_h))
                for pw in range(self.pooled_width):
                    wstart = int(np.floor(pw * bin_size_w))
                    wend = int(np.ceil((pw + 1) * bin_size_w))
                    wstart = min(data_width, max(0, wstart + roi_start_w))
                    wend = min(data_width, max(0, wend + roi_start_w))

                    is_empty = (hend <= hstart) or(wend <= wstart)
                    if is_empty:
                        outputs[roi_ind, :, ph, pw] = 0
                    else:
                        data = features[batch_ind]
                        outputs[roi_ind, :, ph, pw] = torch.max(
                            torch.max(data[:, hstart:hend, wstart:wend], 1)[0], 2)[0].view(-1)

        return outputs

Answer 1

要创建要比较的序列的图表（示例中一天的数据），可以为特定点设置相同的日期，并使用工具提示显示准确的日期。查看我在下面发布给您的简化演示。

代码：

chart = new Highcharts.StockChart({

  chart: {
    renderTo: 'container',
    zoomType: 'x'
  },

  xAxis: [{
    type: 'datetime',
    labels: {
      formatter: function() {
        return Highcharts.dateFormat('%H:%M', this.value);
      }
    }
  }],

  yAxis: {
    visible: true,
    opposite: false,
    showLastLabel: true,
    labels: {
      enabled: true,
      format: "{value}",
      align: "right"
    },
  },

  tooltip: {
    pointFormatter: function() {
      var timestamp = this.series.userOptions.pointStart,
        date = Highcharts.dateFormat('%b %e, %Y', +timestamp);

      return '<span style="color:' + this.series.color + '">' + this.series.name + ' - ' + date + '</span>: <b>' + Highcharts.numberFormat(this.y, 2) + '</b><br/>';
    },
    xDateFormat: '%H:%M'
  },

  legend: {
    enabled: true
  },

  navigator: {
    enabled: true
  },

  rangeSelector: {
    enabled: false
  },

  scrollbar: {
    enabled: false
  },

  navigation: {
    buttonOptions: {
      enabled: true
    }
  },

  series: [{
    "name": "Activa",
    "type": "spline",
    "xAxis": 0,
    "pointStart": "1540339200000",
    "data": [
      [1540339200000, 0.352],
      [1540340100000, 0.288],
      [1540341000000, 0.464],
    ]
  }, {
    "name": "Reactiva",
    "type": "spline",
    "xAxis": 0,
    "pointStart": "1540339200000",
    "data": [
      [1540339200000, 0.352],
      [1540340100000, 0.416],
      [1540341000000, 0.096],
    ]
  }, {
    "name": "Aparente",
    "type": "spline",
    "xAxis": 0,
    "pointStart": "1540339200000",
    "data": [
      [1540339200000, 0.496],
      [1540340100000, 0.504],
      [1540341000000, 0.472],
    ]
  }, {
    "name": "Activa",
    "type": "column",
    "xAxis": 0,
    "pointStart": "1540252800000",
    "data": [
      [1540339200000, 0.288],
      [1540340100000, 0.608],
      [1540341000000, 0.48],
    ]
  }, {
    "name": "Reactiva",
    "type": "column",
    "xAxis": 0,
    "pointStart": "1540252800000",
    "data": [
      [1540339200000, 0.416],
      [1540340100000, 0],
      [1540341000000, 0],
    ]
  }, {
    "name": "Aparente",
    "type": "column",
    "xAxis": 0,
    "pointStart": "1540252800000",
    "data": [
      [1540339200000, 0.504],
      [1540340100000, 0.608],
      [1540341000000, 0.48],
    ]
  }]
});

演示： https://jsfiddle.net/BlackLabel/9cye2qrm/

Answer 2

经过深入调查，我发现不可能在同一“导航器”组件中显示2个X轴。因此，我不得不寻找另一种解决方案。

我所做的就是在“导航器”中修改范围的缩放并将其设置为上轴时采用新的极端：

xAxis: [{
  type: 'datetime',
  events: {
    afterSetExtremes() {
      let bottomAxis = this,
      topAxis = this.chart.xAxis[1],
      diferenciaMin = Math.abs(bottomAxis.dataMin - bottomAxis.min),
      diferenciaMax = Math.abs(bottomAxis.dataMax - bottomAxis.max);
      topAxis.setExtremes(topAxis.dataMin + diferenciaMin, topAxis.dataMax - diferenciaMax, true)
    }
  }
}, {
  type: 'datetime',
  opposite: true,
}],

逻辑很简单。我还将保留afterSetExtremes（）函数的官方文档： https://api.highcharts.com/highcharts/xAxis.events.afterSetExtremes

导航器中未显示相反的X aXis系列

2 个答案: