时间戳

首页 > 解决方案 > Highcharts - 强制区域步长系列在 x 轴的开头和结尾重叠列系列

javascript - Highcharts - 强制区域步长系列在 x 轴的开头和结尾重叠列系列

问题描述

代码笔： https ://codepen.io/Lothain/pen/GRjBOyw

  chart: {
    type: 'column'
    
  },
  title: {
    text: 'Job Billings By Month'
  },
  xAxis: {
    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec',]
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Cost in USD'
    }
  },
  legend: {
    reversed: true
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    },
    area: {
      marker: {
        enabled: false
      },
      lineColor: 'rgb(205,70,43)',
      fillColor: 'rgb(240,198,189)'
    }
  },
  series: [{
    name: 'T&M',
    data: [5, 3, 4, 7, 2, 4, 2, 5, 2, 8, 11, 3],
    color: 'rgb(208,224,227)'
  }, {
    name: 'Workorder',
    data: [2, 2, 3, 2, 1, 3, 4, 4, 2, 5, 4, 2],
    color: 'rgb(207,226,243)'
  }, {
    name: 'Change Order',
    data: [3, 4, 4, 2, 5, 4, 2, 5, 2, 8, 8, 2],
    color: 'rgb(201,218,248)'
  }, {
    name: 'Main Contract',
    data: [3, 4, 4, 2, 5, 2, 8, 11, 3, 4, 8, 3],
    color: 'rgb(164,194,244)'
  }, {
    name: 'Projected Billed',
    type: 'line',
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    color: 'rgb(255,109,1)'
  }, {
    name: 'Cost',
    type: 'area',
    step: 'center',
    color: 'red',
    opacity: .5,
    data: [4,4, 5, 3, 1, 4, 7, 5, 3, 2, 5, 9]
  }]
});

目标：https ://imgur.com/a/Vo7ORj7

我希望阶梯区域系列延伸到 x 轴的边缘，而不是在它们重叠的列的中间结束。我确信这是可能的，但我不知道如何；我尝试使用 series.type.area.step 选项（中心、左、右）无济于事。

标签： javascripthighcharts

解决方案

您可以再添加一个area与当前数据具有相同数据的系列，但也可以使用以下选项：

    series: [..., {
        name: 'Cost',
        type: 'area',
        step: 'center',
        color: 'red',
        lineWidth: 0,
        zIndex: -1,
        data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
    }, {
        linkedTo: ':previous',
        stacking: false,
        type: 'area',
        step: 'center',
        color: 'red',
        fillColor: 'transparent',
        data: [4000, 4000, 5000, 3000, 1000, 4000, 7000, 5000, 3000, 2000, 5000, 9000]
    }]

现场演示：http: //jsfiddle.net/BlackLabel/m6gsrn8o/

API 参考： https ://api.highcharts.com/highcharts/series.area

推荐阅读