Question

我需要在代码库中现有的Highcharts柱形图中显示两组数据。当前图表以毫秒为单位表示24个时间跨度。

对于一个数据集，每个值跨越一个小时，而对于另一个数据集，该值跨越6分钟。我能够在Highcharts上显示这些值，甚至可以使用pointRange来使数据跨过图表的适当宽度，但是在图表的右边没有数据。这会破坏应用程序其余部分的格式。

是否有避免这种额外间距的方法？如果我删除pointRange，则多余的间距将消失在右侧，但是条形图无法像我希望的那样填充该区域。

以下是每种情况的jsfiddles：

with pointRange：https://jsfiddle.net/eh5fgcw6/62/

const MIN_ZOOM_IN_MS = 3600 * 1000 * 4;

const MS_IN_ONE_DAY = 86400000;

const size = 'LARGE';

const COLORS = {
    'black':    '#000000',
    'gray_1':   '#222222',
    'gray_2':   '#7A7A7A',
    'gray_3':   '#888888',
    'gray_4':   '#B2B2B2',
    'gray_5':   '#CBCBCB',
    'gray_6':   '#E6E6E6',
    'gray_7':   '#EEEEEE',
    'gray_8':   '#F9F9F9',
    'gray_9':   '#FAFAFA',
    'blue_1':   '#3397ed',
    'blue_2':   '#11a9ed',
    'blue_3':   '#70CAFF',
    'blue_4':   '#0e334c',
    'blue_5':   '#b0e1f7',
    'blue_6':   '#beeffF',
    'blue_7':   '#0e334c',
    'blue_8':   '#8CD3FA',
    'blue_9':   '#73D4FF',
    'green_1':  '#9AF144',
    'green_2':  '#76FFE5',
    'green_3':  '#72ea24',
    'green_4':  '#50b012',
    'green_5':  '#B6D56B',
    'orange_1': '#E9AE00',
    'orange_2': '#FED7A5',
    'red_1':    '#F02751',
    'red_2':    '#FF0035'
};

const parseISOUTC = function(value) {
    return moment(value).toDate();
}

const mergedSummary = {
    startTimeGmt: "2018-07-09T21:00:00.0"
};

const myChartData = {"valuesArray":[[1531170000000,78],[1531231200000,84],[1531238400000,88],[1531242000000,96],[1531249200000,93],[1531252800000,92]],"monitoringEnvironmentValueDescriptorList":[{"monEnvValueDescIndex":0,"monEnvValueDescKey":"timestamp"},{"monEnvValueDescIndex":1,"monEnvValueDescKey":"monitoringEnvironmentLevel"}],"monitoringEnvironmentValuesArray":[[1531170000000,353.0],[1531170360000,353.0],[1531170720000,353.0],[1531171080000,353.0],[1531171440000,353.0],[1531171800000,353.0],[1531172160000,353.0],[1531172520000,353.0],[1531172880000,353.0],[1531173240000,353.0],[1531173600000,353.0],[1531173960000,353.0],[1531174320000,353.0],[1531174680000,353.0],[1531175040000,353.0],[1531175400000,353.0],[1531175760000,353.0],[1531176120000,353.0],[1531176480000,353.0],[1531176840000,353.0],[1531177200000,353.0],[1531177560000,353.0],[1531177920000,353.0],[1531178280000,353.0],[1531178640000,353.0],[1531179000000,353.0],[1531179360000,353.0],[1531179720000,353.0],[1531180080000,353.0],[1531180440000,353.0],[1531180800000,353.0],[1531181160000,353.0],[1531181520000,353.0],[1531181880000,353.0],[1531182240000,353.0],[1531182600000,353.0],[1531182960000,353.0],[1531183320000,353.0],[1531183680000,353.0],[1531184040000,353.0],[1531184400000,353.0],[1531184760000,353.0],[1531185120000,353.0],[1531185480000,353.0],[1531185840000,353.0],[1531186200000,353.0],[1531186560000,353.0],[1531186920000,353.0],[1531187280000,353.0],[1531187640000,353.0],[1531188000000,353.0],[1531188360000,353.0],[1531188720000,353.0],[1531189080000,353.0],[1531189440000,353.0],[1531189800000,353.0],[1531190160000,353.0],[1531190520000,353.0],[1531190880000,353.0],[1531191240000,353.0],[1531191600000,353.0],[1531191960000,353.0],[1531192320000,353.0],[1531192680000,353.0],[1531193040000,353.0],[1531193400000,353.0],[1531193760000,353.0],[1531194120000,353.0],[1531194480000,353.0],[1531194840000,353.0],[1531195200000,353.0],[1531195560000,353.0],[1531195920000,353.0],[1531196280000,353.0],[1531196640000,353.0],[1531197000000,353.0],[1531197360000,353.0],[1531197720000,353.0],[1531198080000,353.0],[1531198440000,353.0],[1531198800000,353.0],[1531199160000,353.0],[1531199520000,353.0],[1531199880000,353.0],[1531200240000,353.0],[1531200600000,353.0],[1531200960000,353.0],[1531201320000,353.0],[1531201680000,353.0],[1531202040000,353.0],[1531202400000,353.0],[1531202760000,353.0],[1531203120000,353.0],[1531203480000,353.0],[1531203840000,353.0],[1531204200000,353.0],[1531204560000,353.0],[1531204920000,322.0],[1531205280000,307.0],[1531205640000,307.0],[1531206000000,307.0],[1531206360000,307.0],[1531206720000,307.0],[1531207080000,307.0],[1531207440000,307.0],[1531207800000,307.0],[1531208160000,307.0],[1531208520000,307.0],[1531208880000,307.0],[1531209240000,307.0],[1531209600000,307.0],[1531209960000,307.0],[1531210320000,307.0],[1531210680000,307.0],[1531211040000,307.0],[1531211400000,307.0],[1531211760000,307.0],[1531212120000,307.0],[1531212480000,307.0],[1531212840000,307.0],[1531213200000,307.0],[1531213560000,307.0],[1531213920000,307.0],[1531214280000,307.0],[1531214640000,307.0],[1531215000000,307.0],[1531215360000,307.0],[1531215720000,307.0],[1531216080000,307.0],[1531216440000,307.0],[1531216800000,307.0],[1531217160000,307.0],[1531217520000,307.0],[1531217880000,307.0],[1531218240000,307.0],[1531218600000,307.0],[1531218960000,307.0],[1531219320000,307.0],[1531219680000,307.0],[1531220040000,307.0],[1531220400000,307.0],[1531220760000,307.0],[1531221120000,307.0],[1531221480000,307.0],[1531221840000,307.0],[1531222200000,307.0],[1531222560000,307.0],[1531222920000,307.0],[1531223280000,307.0],[1531223640000,307.0],[1531224000000,307.0],[1531224360000,307.0],[1531224720000,307.0],[1531225080000,307.0],[1531225440000,307.0],[1531225800000,307.0],[1531226160000,307.0],[1531226520000,307.0],[1531226880000,307.0],[1531227240000,307.0],[1531227600000,307.0],[1531227960000,307.0],[1531228320000,307.0],[1531228680000,305.0],[1531229040000,304.0],[1531229400000,329.0],[1531229760000,333.0],[1531230120000,346.0],[1531230480000,354.0],[1531230840000,354.0],[1531231200000,354.0],[1531231560000,354.0],[1531231920000,354.0],[1531232280000,341.0],[1531232640000,341.0],[1531233000000,341.0],[1531233360000,341.0],[1531233720000,341.0],[1531234080000,341.0],[1531234440000,341.0],[1531234800000,341.0],[1531235160000,341.0],[1531235520000,341.0],[1531235880000,341.0],[1531236240000,341.0],[1531236600000,354.0],[1531236960000,354.0],[1531237320000,354.0],[1531237680000,354.0],[1531238040000,354.0],[1531238400000,354.0],[1531238760000,354.0],[1531239120000,354.0],[1531239480000,354.0],[1531239840000,354.0],[1531240200000,354.0],[1531240560000,354.0],[1531240920000,354.0],[1531241280000,354.0],[1531241640000,354.0],[1531242000000,354.0],[1531242360000,354.0],[1531242720000,354.0],[1531243080000,354.0],[1531243440000,354.0],[1531243800000,354.0],[1531244160000,354.0],[1531244520000,354.0],[1531244880000,354.0],[1531245240000,354.0],[1531245600000,354.0],[1531245960000,354.0],[1531246320000,354.0],[1531246680000,354.0],[1531247040000,354.0],[1531247400000,354.0],[1531247760000,354.0],[1531248120000,354.0],[1531248480000,354.0],[1531248840000,354.0],[1531249200000,354.0],[1531249560000,354.0],[1531249920000,354.0],[1531250280000,354.0],[1531250640000,354.0],[1531251000000,354.0],[1531251360000,354.0],[1531251720000,354.0],[1531252080000,354.0],[1531252440000,354.0],[1531252800000,354.0],[1531253160000,354.0],[1531253520000,354.0],[1531253880000,354.0],[1531254240000,354.0],[1531254600000,354.0],[1531254960000,346.0],[1531255320000,342.0],[1531255680000,346.0],[1531256040000,355.0]]};

const getEmptyBookends = function() {
        return [
            [parseISOUTC(mergedSummary.startTimeGmt).getTime(), null], // add a point at the beginning to force 24 hour display
            [parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null] // add a point at the end of the day to force 24 hour display
        ];
    }

const getLowerTimelineData = function() {

  const indexes = {};
  const data = [];
  let x, y, color, dataType;
  const chartDataArray = myChartData.monitoringEnvironmentValuesArray;

  // Use the descriptors from the endpoint to retrieve the indexes, the data is located here for future-proofing
  myChartData.monitoringEnvironmentValueDescriptorList.forEach((valueDescriptor) => {
    indexes[valueDescriptor.monEnvValueDescKey] = valueDescriptor.monEnvValueDescIndex;
  });



  data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime(), null]); // add a point at the beginning to force 24 hour display

  for(var j = 0, lengthJay = chartDataArray.length; j < lengthJay; j++) {
    x = chartDataArray[j][indexes['timestamp']];
    y = chartDataArray[j][indexes['reading']];
    color = COLORS.gray_9;
    dataType = 'stress';

    y = -5;
    color = COLORS.gray_9;
    dataType = 'stress';

    data.push({
      x: x,
      y: y,
      color: color,
      type: dataType
    });
  }

  data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null]); // add a point at the end of the day to force 24 hour display

  return data;

}

const getXAxesConfig = function(size) {
  const xAxis = [];

  xAxis.push({
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    labels: {
      enabled: false
    },
    minRange: MIN_ZOOM_IN_MS
  });

  xAxis[0].min = 1531170000000;
  xAxis[0].max = 1531256400000;

  return xAxis;
}

const getYAxesConfig = function(size) {

    const yAxis = [];

  const maxValue = 710;
  yAxis.push({
    labels: {
      align: 'left',
      x: 2,
      formatter: function() {
        return this.value;
      }
    },
    showFirstLabel: false,
    title: {
      text: 'BOTTOM',
      margin: 0
    },
    opposite: true,
    allowDecimals: false,
    max: maxValue,
    min: 0,
    endOnTick: false,
    // Manually set the positions of the y axis tick marks
    tickPositioner: function() {
      return [maxValue * -.05, Math.round(maxValue * .25), Math.round(maxValue * .5), Math.round(maxValue * .75), maxValue];
    },
  }, {
    title: {
      text: 'TOP',
      margin: 0
    },
    labels: {
      align: 'right',
      x: -2,
      formatter: function() {
        return this.value;
      }
    },
    showFirstLabel: false,
    max: 100,
    min: 0,
    endOnTick: false,
    // Manually set the positions of the y axis tick marks
    tickPositioner: function() {
      return [-5, 25, 50, 75, 100];
    },
  })

  return yAxis;
}

const buildSeries = function() {

  const series = [];
  const lowerTimelineData = getLowerTimelineData();

  const chartData = myChartData.monitoringEnvironmentValuesArray;
  const spoChartData = myChartData.valuesArray;

  series.push({
    name: 'top data',
    type: 'column',
    yAxis: 1,
    data: spoChartData,
    tooltip: {
      valueSuffix: '%'
    },
    threshold: Infinity,
    zones: [{
      value: 70,
      color: '#ed7e00'
    }, {
      value: 80,
      color: '#FC9E31'
    }, {
      value: 90,
      color: '#F6E639'
    }, {
      value: 101,
      color: '#54AE25'
    }],
    pointPadding: 0,
    // pointInterval: 3600 * 1000,
    groupPadding: 0,
    borderWidth: 0,
    pointRange: 3600 * 2000,
    // pointWidth: 10,
    states: {
      hover: {
        enabled: false
      }
    },
    showInLegend: false,
    pointPlacement: 'between'
  }, {
    name: 'bottom data',
    type: 'column',
    yAxis: 0,
    zIndex: 1,
    data: chartData,
    tooltip: {
      valueSuffix: 'k'
    },
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    color: '#C7C7C7',
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 0,
    // pointInterval: 3600 * 200,
    pointRange: 3600 * 200,
    // pointWidth: 10,
    states: {
      hover: {
        enabled: false
      }
    },
    // events: {
    //     legendItemClick: function () {
    //         return false;
    //     }
    // },
    pointPlacement: 'between'
  }, {
    type: 'column',
    data: lowerTimelineData,
    color: COLORS.gray_3,
    name: 'base data',
    showInLegend: false,
    yAxis: 0,
    zIndex: 1,
    grouping: false,
    borderWidth: 0,
    pointPadding: 0,
    groupPadding: 0,
    events: {
      legendItemClick: function() {
        return false;
      }
    },
    pointRange: 3600 * 200,
    // pointInterval: 3600 * 200,
    pointPlacement: 'between',
    threshold: -Infinity
  })



  if(series.length > 0) {
    series.push({
      type: 'line',
      color: COLORS.blue_7,
      name: "hidden_series",
      showInLegend: false,
      data: getEmptyBookends()
    });
  }

  return series;
}

Highcharts.chart('container', {

  backgroundColor: 'transparent',
  marginBottom: 95,
  marginTop: 50,
  marginLeft: 48,
  marginRight: 48,
  height: 365,
  reflow: true,
  zoomType: 'x',
  resetZoomButton: {
    theme: {
      display: 'none'
    }
  },

  credits: {
    enabled: false
  },

  exporting: {
    enabled: false
  },

  title: {
    text: '',
    margin: 0
  },

  legend: {
    itemDistance: 22,
    borderColor: "transparent",
    useHTML: true,
    symbolHeight: 10,
    y: 20,
    labelFormatter: function() {
      return this.name;
    },
    itemStyle: {
      fontWeight: 'normal',
      lineHeight: '20px'
    }
  },

  series: buildSeries(),

  xAxis: getXAxesConfig(size),
  yAxis: getYAxesConfig(size)

});

没有pointRange：https://jsfiddle.net/eh5fgcw6/60/

const MIN_ZOOM_IN_MS = 3600 * 1000 * 4;

const MS_IN_ONE_DAY = 86400000;

const size = 'LARGE';

const COLORS = {
    'black':    '#000000',
    'gray_1':   '#222222',
    'gray_2':   '#7A7A7A',
    'gray_3':   '#888888',
    'gray_4':   '#B2B2B2',
    'gray_5':   '#CBCBCB',
    'gray_6':   '#E6E6E6',
    'gray_7':   '#EEEEEE',
    'gray_8':   '#F9F9F9',
    'gray_9':   '#FAFAFA',
    'blue_1':   '#3397ed',
    'blue_2':   '#11a9ed',
    'blue_3':   '#70CAFF',
    'blue_4':   '#0e334c',
    'blue_5':   '#b0e1f7',
    'blue_6':   '#beeffF',
    'blue_7':   '#0e334c',
    'blue_8':   '#8CD3FA',
    'blue_9':   '#73D4FF',
    'green_1':  '#9AF144',
    'green_2':  '#76FFE5',
    'green_3':  '#72ea24',
    'green_4':  '#50b012',
    'green_5':  '#B6D56B',
    'orange_1': '#E9AE00',
    'orange_2': '#FED7A5',
    'red_1':    '#F02751',
    'red_2':    '#FF0035'
};

const parseISOUTC = function(value) {
    return moment(value).toDate();
}

const mergedSummary = {
    startTimeGmt: "2018-07-09T21:00:00.0"
};

const myChartData = {"valuesArray":[[1531170000000,78],[1531231200000,84],[1531238400000,88],[1531242000000,96],[1531249200000,93],[1531252800000,92]],"monitoringEnvironmentValueDescriptorList":[{"monEnvValueDescIndex":0,"monEnvValueDescKey":"timestamp"},{"monEnvValueDescIndex":1,"monEnvValueDescKey":"monitoringEnvironmentLevel"}],"monitoringEnvironmentValuesArray":[[1531170000000,353.0],[1531170360000,353.0],[1531170720000,353.0],[1531171080000,353.0],[1531171440000,353.0],[1531171800000,353.0],[1531172160000,353.0],[1531172520000,353.0],[1531172880000,353.0],[1531173240000,353.0],[1531173600000,353.0],[1531173960000,353.0],[1531174320000,353.0],[1531174680000,353.0],[1531175040000,353.0],[1531175400000,353.0],[1531175760000,353.0],[1531176120000,353.0],[1531176480000,353.0],[1531176840000,353.0],[1531177200000,353.0],[1531177560000,353.0],[1531177920000,353.0],[1531178280000,353.0],[1531178640000,353.0],[1531179000000,353.0],[1531179360000,353.0],[1531179720000,353.0],[1531180080000,353.0],[1531180440000,353.0],[1531180800000,353.0],[1531181160000,353.0],[1531181520000,353.0],[1531181880000,353.0],[1531182240000,353.0],[1531182600000,353.0],[1531182960000,353.0],[1531183320000,353.0],[1531183680000,353.0],[1531184040000,353.0],[1531184400000,353.0],[1531184760000,353.0],[1531185120000,353.0],[1531185480000,353.0],[1531185840000,353.0],[1531186200000,353.0],[1531186560000,353.0],[1531186920000,353.0],[1531187280000,353.0],[1531187640000,353.0],[1531188000000,353.0],[1531188360000,353.0],[1531188720000,353.0],[1531189080000,353.0],[1531189440000,353.0],[1531189800000,353.0],[1531190160000,353.0],[1531190520000,353.0],[1531190880000,353.0],[1531191240000,353.0],[1531191600000,353.0],[1531191960000,353.0],[1531192320000,353.0],[1531192680000,353.0],[1531193040000,353.0],[1531193400000,353.0],[1531193760000,353.0],[1531194120000,353.0],[1531194480000,353.0],[1531194840000,353.0],[1531195200000,353.0],[1531195560000,353.0],[1531195920000,353.0],[1531196280000,353.0],[1531196640000,353.0],[1531197000000,353.0],[1531197360000,353.0],[1531197720000,353.0],[1531198080000,353.0],[1531198440000,353.0],[1531198800000,353.0],[1531199160000,353.0],[1531199520000,353.0],[1531199880000,353.0],[1531200240000,353.0],[1531200600000,353.0],[1531200960000,353.0],[1531201320000,353.0],[1531201680000,353.0],[1531202040000,353.0],[1531202400000,353.0],[1531202760000,353.0],[1531203120000,353.0],[1531203480000,353.0],[1531203840000,353.0],[1531204200000,353.0],[1531204560000,353.0],[1531204920000,322.0],[1531205280000,307.0],[1531205640000,307.0],[1531206000000,307.0],[1531206360000,307.0],[1531206720000,307.0],[1531207080000,307.0],[1531207440000,307.0],[1531207800000,307.0],[1531208160000,307.0],[1531208520000,307.0],[1531208880000,307.0],[1531209240000,307.0],[1531209600000,307.0],[1531209960000,307.0],[1531210320000,307.0],[1531210680000,307.0],[1531211040000,307.0],[1531211400000,307.0],[1531211760000,307.0],[1531212120000,307.0],[1531212480000,307.0],[1531212840000,307.0],[1531213200000,307.0],[1531213560000,307.0],[1531213920000,307.0],[1531214280000,307.0],[1531214640000,307.0],[1531215000000,307.0],[1531215360000,307.0],[1531215720000,307.0],[1531216080000,307.0],[1531216440000,307.0],[1531216800000,307.0],[1531217160000,307.0],[1531217520000,307.0],[1531217880000,307.0],[1531218240000,307.0],[1531218600000,307.0],[1531218960000,307.0],[1531219320000,307.0],[1531219680000,307.0],[1531220040000,307.0],[1531220400000,307.0],[1531220760000,307.0],[1531221120000,307.0],[1531221480000,307.0],[1531221840000,307.0],[1531222200000,307.0],[1531222560000,307.0],[1531222920000,307.0],[1531223280000,307.0],[1531223640000,307.0],[1531224000000,307.0],[1531224360000,307.0],[1531224720000,307.0],[1531225080000,307.0],[1531225440000,307.0],[1531225800000,307.0],[1531226160000,307.0],[1531226520000,307.0],[1531226880000,307.0],[1531227240000,307.0],[1531227600000,307.0],[1531227960000,307.0],[1531228320000,307.0],[1531228680000,305.0],[1531229040000,304.0],[1531229400000,329.0],[1531229760000,333.0],[1531230120000,346.0],[1531230480000,354.0],[1531230840000,354.0],[1531231200000,354.0],[1531231560000,354.0],[1531231920000,354.0],[1531232280000,341.0],[1531232640000,341.0],[1531233000000,341.0],[1531233360000,341.0],[1531233720000,341.0],[1531234080000,341.0],[1531234440000,341.0],[1531234800000,341.0],[1531235160000,341.0],[1531235520000,341.0],[1531235880000,341.0],[1531236240000,341.0],[1531236600000,354.0],[1531236960000,354.0],[1531237320000,354.0],[1531237680000,354.0],[1531238040000,354.0],[1531238400000,354.0],[1531238760000,354.0],[1531239120000,354.0],[1531239480000,354.0],[1531239840000,354.0],[1531240200000,354.0],[1531240560000,354.0],[1531240920000,354.0],[1531241280000,354.0],[1531241640000,354.0],[1531242000000,354.0],[1531242360000,354.0],[1531242720000,354.0],[1531243080000,354.0],[1531243440000,354.0],[1531243800000,354.0],[1531244160000,354.0],[1531244520000,354.0],[1531244880000,354.0],[1531245240000,354.0],[1531245600000,354.0],[1531245960000,354.0],[1531246320000,354.0],[1531246680000,354.0],[1531247040000,354.0],[1531247400000,354.0],[1531247760000,354.0],[1531248120000,354.0],[1531248480000,354.0],[1531248840000,354.0],[1531249200000,354.0],[1531249560000,354.0],[1531249920000,354.0],[1531250280000,354.0],[1531250640000,354.0],[1531251000000,354.0],[1531251360000,354.0],[1531251720000,354.0],[1531252080000,354.0],[1531252440000,354.0],[1531252800000,354.0],[1531253160000,354.0],[1531253520000,354.0],[1531253880000,354.0],[1531254240000,354.0],[1531254600000,354.0],[1531254960000,346.0],[1531255320000,342.0],[1531255680000,346.0],[1531256040000,355.0]]};

const getEmptyBookends = function() {
        return [
            [parseISOUTC(mergedSummary.startTimeGmt).getTime(), null], // add a point at the beginning to force 24 hour display
            [parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null] // add a point at the end of the day to force 24 hour display
        ];
    }

const getLowerTimelineData = function() {

  const indexes = {};
  const data = [];
  let x, y, color, dataType;
  const chartDataArray = myChartData.monitoringEnvironmentValuesArray;

  // Use the descriptors from the endpoint to retrieve the indexes, the data is located here for future-proofing
  myChartData.monitoringEnvironmentValueDescriptorList.forEach((valueDescriptor) => {
    indexes[valueDescriptor.monEnvValueDescKey] = valueDescriptor.monEnvValueDescIndex;
  });



  data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime(), null]); // add a point at the beginning to force 24 hour display

  for(var j = 0, lengthJay = chartDataArray.length; j < lengthJay; j++) {
    x = chartDataArray[j][indexes['timestamp']];
    y = chartDataArray[j][indexes['reading']];
    color = COLORS.gray_9;
    dataType = 'stress';

    y = -5;
    color = COLORS.gray_9;
    dataType = 'stress';

    data.push({
      x: x,
      y: y,
      color: color,
      type: dataType
    });
  }

  data.push([parseISOUTC(mergedSummary.startTimeGmt).getTime() + MS_IN_ONE_DAY, null]); // add a point at the end of the day to force 24 hour display

  return data;

}

const getXAxesConfig = function(size) {
  const xAxis = [];

  xAxis.push({
    lineWidth: 0,
    minorGridLineWidth: 0,
    lineColor: 'transparent',
    minorTickLength: 0,
    tickLength: 0,
    labels: {
      enabled: false
    },
    minRange: MIN_ZOOM_IN_MS
  });

  xAxis[0].min = 1531170000000;
  xAxis[0].max = 1531256400000;

  return xAxis;
}

const getYAxesConfig = function(size) {

    const yAxis = [];

  const maxValue = 710;
  yAxis.push({
    labels: {
      align: 'left',
      x: 2,
      formatter: function() {
        return this.value;
      }
    },
    showFirstLabel: false,
    title: {
      text: 'BOTTOM',
      margin: 0
    },
    opposite: true,
    allowDecimals: false,
    max: maxValue,
    min: 0,
    endOnTick: false,
    // Manually set the positions of the y axis tick marks
    tickPositioner: function() {
      return [maxValue * -.05, Math.round(maxValue * .25), Math.round(maxValue * .5), Math.round(maxValue * .75), maxValue];
    },
  }, {
    title: {
      text: 'TOP',
      margin: 0
    },
    labels: {
      align: 'right',
      x: -2,
      formatter: function() {
        return this.value;
      }
    },
    showFirstLabel: false,
    max: 100,
    min: 0,
    endOnTick: false,
    // Manually set the positions of the y axis tick marks
    tickPositioner: function() {
      return [-5, 25, 50, 75, 100];
    },
  })

  return yAxis;
}

const buildSeries = function() {

  const series = [];
  const lowerTimelineData = getLowerTimelineData();

  const chartData = myChartData.monitoringEnvironmentValuesArray;
  const spoChartData = myChartData.valuesArray;

  series.push({
    name: 'top data',
    type: 'column',
    yAxis: 1,
    data: spoChartData,
    tooltip: {
      valueSuffix: '%'
    },
    threshold: Infinity,
    zones: [{
      value: 70,
      color: '#ed7e00'
    }, {
      value: 80,
      color: '#FC9E31'
    }, {
      value: 90,
      color: '#F6E639'
    }, {
      value: 101,
      color: '#54AE25'
    }],
    pointPadding: 0,
    // pointInterval: 3600 * 1000,
    groupPadding: 0,
    borderWidth: 0,
    // pointRange: 3600 * 1000,
    // pointWidth: 10,
    states: {
      hover: {
        enabled: false
      }
    },
    showInLegend: false,
    pointPlacement: 'between'
  }, {
    name: 'bottom data',
    type: 'column',
    yAxis: 0,
    zIndex: 1,
    data: chartData,
    tooltip: {
      valueSuffix: 'k'
    },
    marker: {
      enabled: false,
      states: {
        hover: {
          enabled: false
        }
      }
    },
    color: '#C7C7C7',
    pointPadding: 0,
    groupPadding: 0,
    borderWidth: 0,
    // pointInterval: 3600 * 200,
    // pointRange: 3600 * 200,
    // pointWidth: 10,
    states: {
      hover: {
        enabled: false
      }
    },
    // events: {
    //     legendItemClick: function () {
    //         return false;
    //     }
    // },
    pointPlacement: 'between'
  }, {
    type: 'column',
    data: lowerTimelineData,
    color: COLORS.gray_3,
    name: 'base data',
    showInLegend: false,
    yAxis: 0,
    zIndex: 1,
    grouping: false,
    borderWidth: 0,
    pointPadding: 0,
    groupPadding: 0,
    events: {
      legendItemClick: function() {
        return false;
      }
    },
    // pointRange: 3600 * 200,
    // pointInterval: 3600 * 200,
    pointPlacement: 'between',
    threshold: -Infinity
  })



  if(series.length > 0) {
    series.push({
      type: 'line',
      color: COLORS.blue_7,
      name: "hidden_series",
      showInLegend: false,
      data: getEmptyBookends()
    });
  }

  return series;
}

Highcharts.chart('container', {

  backgroundColor: 'transparent',
  marginBottom: 95,
  marginTop: 50,
  marginLeft: 48,
  marginRight: 48,
  height: 365,
  reflow: true,
  zoomType: 'x',
  resetZoomButton: {
    theme: {
      display: 'none'
    }
  },

  credits: {
    enabled: false
  },

  exporting: {
    enabled: false
  },

  title: {
    text: '',
    margin: 0
  },

  legend: {
    itemDistance: 22,
    borderColor: "transparent",
    useHTML: true,
    symbolHeight: 10,
    y: 20,
    labelFormatter: function() {
      return this.name;
    },
    itemStyle: {
      fontWeight: 'normal',
      lineHeight: '20px'
    }
  },

  series: buildSeries(),

  xAxis: getXAxesConfig(size),
  yAxis: getYAxesConfig(size)

});

Highcharts柱形图-pointRange在右侧产生多余的空间

0 个答案: