分组格式的Highcharts堆积柱形图

34gzjxbg  于 2022-11-24  发布在  Highcharts
关注(0)|答案(1)|浏览(182)

我需要在Highchart.js中设计一个同样的图片图表示例,它是在Excel中构建的。有人能帮我在highcharts.js中开发这个吗?
Image Preview
我已经以类似的方式实现了它。但我需要在同一图表中的不同颜色组和组合。-

`https://jsfiddle.net/shwetapandey/rwmxoka5`
jutyujz0

jutyujz01#

我建议添加新的系列,具有不同的xAxis,series.columnrange.xAxis。对于风格,你有选项来调整像xAxis.leftxAxis.top

chart: {
    type: 'columnrange',
  },
  xAxis: [{
    width: '33%',
    offset: 0,
  }, {
    left: '50%',
    width: '33%',
    offset: 0,
  }],
  plotOptions: {
    xAxis: {
      labels: {
        enabled: true
      }
    },
    columnrange: {
      grouping: false,
      dataLabels: {
        enabled: true,
      }
    }
  },
  series: [{
      name: 'Joe',
      color: '#E5DDE3',
      data: [
        [-5, 5],
        [-10, 10],
        [-13, 13],
        [-16, 16],
        [-19, 19]
      ]
    },
    {
      name: 'Jane',
      color: '#BEA9BA',
      data: [
        [-3.5, 3.5],
        [-6, 6],
        [-7, 7],
        [-9, 9],
        [-12, 12]
      ]
    },
    {
      color: '#A5879E',
      name: 'John',
      data: [
        [-1.5, 1.5],
        [-2, 2],
        [-3, 3],
        [-4, 4],
        [-5, 5]
      ]
    },
    {
      name: 'Joe1',
      color: '#FFA500',
      xAxis: 1,
      data: [
        [-5, 5],
        [-10, 10],
        [-13, 13],
        [-16, 16],
        [-19, 19]
      ].reverse()
    },
    {
      name: 'Jane1',
      color: '#FFA500',
      xAxis: 1,
      data: [
        [-3.5, 3.5],
        [-6, 6],
        [-7, 7],
        [-9, 9],
        [-12, 12]
      ]
    },
    {
      color: '#FFA500',
      name: 'John1',
      xAxis: 1,
      data: [
        [-1.5, 1.5],
        [-2, 2],
        [-3, 3],
        [-4, 4],
        [-5, 5]
      ]
    }
  ]

演示:https://jsfiddle.net/BlackLabel/cpjgvds9/
要控制每个系列,您需要编写一个自定义图例控件,为此,您可以使用legend.labelFormatter,它为您提供回调函数来格式化每个系列的标签。
编辑------
为了控制许多组序列,我使用了内置于序列事件中的回调函数events.legendItemClick。在这种情况下,它们给予在图例处管理序列,我比较了序列名称和项目索引,以隐藏和显示带有自定义图例的序列组。

events: {
    legendItemClick: function() {
      let name = this.name.substring(this.name.length - 1, this.name.length);

      let _i = this._i;
      this.chart.series.forEach(function(p, i) {
        console.log('p: ', p, 'i: ', i);
        if (name === p.name.substring(p.name.length - 1, p.name.length) && _i !== p._i) {
          (!p.visible) ? p.show(): p.hide()
        }
      })
    }
  }

演示:https://jsfiddle.net/BlackLabel/v0kt5b14

相关问题