highcharts HightChart -宽度列

exdqitrt  于 2023-04-12  发布在  Highcharts
关注(0)|答案(1)|浏览(191)

你好,我遇到这样的问题:
我希望列的宽度为26px。我使用pointWidth=26,它就完成了。
但它有一个问题,即列不是彼此相邻的。
如何解决此问题?
这是我的代码:https://codesandbox.io/s/modern-field-rnt0bx?file=/src/App.tsx:0-3136
我想要这样的结果。列彼此相邻。这里是插图Output

k5ifujac

k5ifujac1#

您可以使用pointPlacement属性来定位列:

series: [{
  ...,
  pointPlacement: 0.12
},
{
  ...,
  pointPlacement: -0.12
}]

示例http://jsfiddle.net/BlackLabel/2e3rawgu/

但是如果你的图表有动态宽度,你需要通过自定义代码设置位置,例如:

chart: {
    ...,
    events: {
      render: function() {
        const xAxis = this.xAxis[0],
          series = this.series,
          plotLeft = this.plotLeft;

        const correctPosition = (points, correction) => {
          points.forEach(point => {
            point.graphic.attr({
              x: xAxis.toPixels(point.x) - plotLeft + correction
            });
          });
        }

        correctPosition(series[0].points, -POINT_WIDTH);
        correctPosition(series[1].points, 0);
      }
    }
  }

现场演示:http://jsfiddle.net/BlackLabel/ae2htc0z/
API引用:https://api.highcharts.com/highcharts/series.column.pointPlacement

相关问题