如何在Highcharts中将柱形图和条形图合并在同一轴上？

xpcnnkqh 于 2023-04-21 发布在 Highcharts

关注(0)|答案(1)|浏览(162)

我需要在Highcharts中重新创建以下可视化：

这只是一个直方图，一个单一的价值条形图重叠在同一个X轴上。所有的直方图数据是预先汇总的，所以我觉得我可以通过组合一个列系列和一个条形系列来实现这一点。
但是，正如你在这个CodePen中看到的：https://codepen.io/aaduane/pen/xxyEzGr?editors=0010。

Highcharts.chart("container", {
  xAxis: { tickInterval: 50, endOnTick: true },
  yAxis: { max: 238, visible: false },
  series: [
    {
      type: "column",
      pointPlacement: "between",
      pointPadding: 0,
      groupPadding: 0,
      pointInterval: 50,
      data: [
        ["0-50", 0],
        ["50-100", 0],
        ["100-150", 181],
        ["150-200", 238],
        ["200-250", 4],
        ["250-300", 1],
        ["300-350", 0],
        ["350-400", 0],
        ["400-450", 0],
        ["450-500", 0],
        ["500-550", 0],
        ["550-600", 0],
        ["600-650", 0]
      ],
      color: "#000000",
      opacity: 0.6
    },
    { type: "bar", data: [500], color: "red" }
  ]
});

如果我尝试将“bar”系列添加到“column”系列中，Highcharts将使所有内容都成为“bar”或“column”，而不是两者兼而有之。
我想用Highcharts做的事情有可能做到吗？

highcharts

来源：https://stackoverflow.com/questions/76054281/how-to-combine-column-and-bar-chart-on-same-axis-in-highcharts

1条答案

按热度按时间

jw5wzhpr1#

使用Highcharts.SVGRenderer来实现这一点。下面是带有轴的附加设置的示例配置：

Highcharts.chart("container", {
  chart: {
    events: {
      render() {
        const chart = this,
          height = this.yAxis[0].toPixels(-10) - this.yAxis[0].toPixels(100),
          from = this.xAxis[0].toPixels(0),
          to = this.xAxis[0].toPixels(200),
          width = to - from,
          rectStart = this.yAxis[0].toPixels(100);
        if (!chart.rect) {
          chart.rect = chart.renderer.rect(from, rectStart, width, height)
            .attr({
              fill: 'rgba(255, 0, 0, 0.3)',
              zIndex: 100
            }).add(chart.rects)
            .add()
        } else {
          chart.rect.attr({
            x: from,
            y: rectStart,
            width,
            height
          })
        }
      }
    }
  },
  xAxis: {
    offset: 20,
    lineWidth: 0,
    tickInterval: 50,
    endOnTick: true,
  },
  yAxis: {
    plotLines: [{
      color: 'grey',
      width: 1,
      value: 0
    }],
    max: 238,
    gridLineWidth: 0,
    title: '',
    labels: {
      enabled: false
    }
  },
  series: [{
    type: "column",
    pointPlacement: "between",
    pointPadding: 0,
    groupPadding: 0,
    pointInterval: 50,
    data: [
      ["0-50", 0],
      ["50-100", 0],
      ["100-150", 181],
      ["150-200", 238],
      ["200-250", 4],
      ["250-300", 1],
      ["300-350", 0],
      ["350-400", 0],
      ["400-450", 0],
      ["450-500", 0],
      ["500-550", 0],
      ["550-600", 0],
      ["600-650", 0]
    ],
    color: "#000000",
    opacity: 0.6
  }]
});

Demo：https://jsfiddle.net/BlackLabel/swLvfa7k/
API引用：

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels

赞(0）回复(0）举报 2023-04-21

我来回答

如何在Highcharts中将柱形图和条形图合并在同一轴上？

1条答案

相关问题

热门标签

最新问答