在highcharts中的同一图表上绘制多列

我试图在同一张图表上绘制多个柱形图，相互叠加

每个彩色栏段表示在给定月底达到给定水平的团队百分比。这就像是4张单独的柱形图。我认为这与分组和堆叠不同，但可能是错误的

---

谢谢你的反馈

这可以通过组合堆叠和列范围来完成。这里有几个注意事项，您必须为您的

yAxis

设置一个类别，这会使您设置系列数据值的方式变得有趣。我选择了一种方法，我相信还有其他方法。我首先将图表类型设置为

“columnrange”

：

chart: {
  type: 'columnrange'
},

然后，我将

yAxis

属性设置为使用类别：

yAxis: {
  categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],

由于类别的偏移位于轴的刻度线之间，我将其删除，并将开始位置设置为不在刻度线上：

  startOnTick: false,
  min: .5,
  gridLineWidth: 0,

接下来，我必须设置标签的格式（基本上只是隐藏第一个标签）：

现在，我创建网格线来模拟最后一个网格线，并使用不同的颜色来表示“目标”：

现在，我为该图表设置了

plotOptions

。请注意，

stacking

参数未作为

columnrange

类型的一部分在API中列出，但它仍然可以工作（从使用v5.0的回答开始）：

好的，快到了。然后设置系列数据：

series: [{
  name: 's1',
  data: [
    [0, .64],
    [0, .9],
    [0, 1]
  ]
}, {
  name: 's2',
  data: [
    [null, null],
    [1, 1.1],
    [1.0, 1.5]
  ]
}, {
  name: 's3',
  data: [
    [null, null],
    [null, null],
    [2.0, 2.5]
  ]
}]

数据值的重要部分是，每个“级别”都是一个整数，因此级别1从0到1，级别2从1到2，级别3从2到3。这很好，因为你试图确定每个月在每个级别的百分比，因为它们仍然是统一的增量

我没有修改工具提示，因为你没有给出任何说明

示例和完整代码：

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'columnrange'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
      startOnTick: false,
      min: .5,
      gridLineWidth: 0,
      title: {
        text: null
      },
      labels: {
        formatter: function() {
          var label = this.axis.defaultLabelFormatter.call(this);
          if (!this.isFirst) {
            return label;
          }
        }
      },
      plotLines: [{
        color: '#e6e6e6',
        width: 1,
        value: 1
      }, {
        color: '#e6e6e6',
        width: 1,
        value: 2
      }, {
        color: 'red',
        width: 2,
        value: 3,
        label: {
          text: 'Target'
        }
      }]
    },
    plotOptions: {
      columnrange: {
        stacking: true
      }
    },
    legend: {
      enabled: true
    },
    series: [{
      name: 's1',
      data: [
        [0, .64],
        [0, .9],
        [0, 1]
      ]
    }, {
      name: 's2',
      data: [
        [null, null],
        [1, 1.1],
        [1.0, 1.5]
      ]
    }, {
      name: 's3',
      data: [
        [null, null],
        [null, null],
        [2.0, 2.5]
      ]
    }]
  });
});

---

这是一个堆叠柱形图。你可以从海图网站上看到一个例子

plotOptions: {
  columnrange: {
    stacking: true
  }
},

series: [{
  name: 's1',
  data: [
    [0, .64],
    [0, .9],
    [0, 1]
  ]
}, {
  name: 's2',
  data: [
    [null, null],
    [1, 1.1],
    [1.0, 1.5]
  ]
}, {
  name: 's3',
  data: [
    [null, null],
    [null, null],
    [2.0, 2.5]
  ]
}]

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'columnrange'
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      categories: ['Level 0', 'Level 1', 'Level 2', 'Level 3'],
      startOnTick: false,
      min: .5,
      gridLineWidth: 0,
      title: {
        text: null
      },
      labels: {
        formatter: function() {
          var label = this.axis.defaultLabelFormatter.call(this);
          if (!this.isFirst) {
            return label;
          }
        }
      },
      plotLines: [{
        color: '#e6e6e6',
        width: 1,
        value: 1
      }, {
        color: '#e6e6e6',
        width: 1,
        value: 2
      }, {
        color: 'red',
        width: 2,
        value: 3,
        label: {
          text: 'Target'
        }
      }]
    },
    plotOptions: {
      columnrange: {
        stacking: true
      }
    },
    legend: {
      enabled: true
    },
    series: [{
      name: 's1',
      data: [
        [0, .64],
        [0, .9],
        [0, 1]
      ]
    }, {
      name: 's2',
      data: [
        [null, null],
        [1, 1.1],
        [1.0, 1.5]
      ]
    }, {
      name: 's3',
      data: [
        [null, null],
        [null, null],
        [2.0, 2.5]
      ]
    }]
  });
});