如何协调2个图表

时间:2017-08-27 13:00:31

标签: javascript reactjs highcharts react-highcharts

目标:创建一个行类型的两个graps,另一个类型为columnrange。 我使用react-highcharts,highcharts-more,highchartsExporting。两种情况下的X轴都是type:datetime。并使用时间戳(ms)。

let eventsChartOpts = {
  chart: {
    type: 'columnrange',
    inverted: true,
    spacingTop: 0,
    spacingBottom: 0,
  plotOptions: {
    series: {
      borderRadius: 3,
      dataLabels: {
        align: 'left',
        enabled: true,
        inside: true,
        formatter: function() {
          if (!this.key)
            return null;
          return this.key;
        },
        padding: 5,
        style: {
          fontWeight: 'normal',
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          textShadow: 'none',
          whiteSpace: 'nowrap'
        },
        useHTML: true
      }
    }
  },
  series:events,
  tooltip: {
    enabled: false
  },
  xAxis: {
    visible: false
  },
  yAxis: {
    min: moment(dates[1]).unix()*1000,
    max: moment(dates[dates.length-1]).unix()*1000,
    minTickInterval: 24 * 60 * 60 * 1000, // one day
    opposite: true,
    showFirstLabel: false,
    showLastLabel: false,
    type:'datetime' 
  },
};

let config = {
  chart:{
    type: 'line',
    spacingTop: 0,
    spacingBottom: 0,
    },
    title: {
      text: null
    },
    xAxis: {
      crosshair: {
        color: '#e3e3e3',
        snap: true
      },
      gridLineWidth: 1,
      labels: {
        align: 'center'
      },
      min: moment(dates[0]).unix()*1000,
      max: moment(dates[dates.length-1]).unix()*1000,
      minTickInterval: 24 * 60 * 60 * 1000, // one day
      showFirstLabel: false,
      showLastLabel: false,
      type: 'datetime'
    },
    yAxis: {
      maxPadding: 0.1,
      reversed: false,
      visible: false
    },
    series:rates
};

但我得到的是:

X轴,不匹配,但设置相同。我不明白为什么。我认为填充问题,但不,我有相同的填充。我需要你的帮助。

0 个答案:

没有答案