为 amcharts 中的特定部分添加背景颜色

Question

寻找一种基于 x 轴值向图形部分添加背景颜色的方法。 尝试了以下似乎适用于整个情节区域而不是所需部分的方法。

chart.background.fill = '#0f0'
chart.background.opacity = 0.5

示例代码 - https://www.amcharts.com/demos/simple-column-chart/#code

我们怎样才能让say USA柱栏的背景变成红色？

图表：

Answer 1

没有minimal reproducible example，我只能做这么多。这是我使用 vanilla CSS、JavaScript 和 HTML 制作的示例。也许你可以在这里找到一些东西来帮助你。如果您使用最小的可重现示例更新您的问题，我可以尝试发布更有帮助的答案。

//define our start hue and end hue
let startHue = 172;
let endHue = 267;

//create an array of our bars
let bars = document.querySelectorAll('.bar');

//loop through bars
for(var i = 0; i < bars.length; i ++) {
  //give bars a random height
  bars[i].style.height = 40 + (Math.floor(Math.random() * 200))+ "px";
  //run equation to get color based on position in array (explination of equation below)
  let bgcol = startHue + (((endHue - startHue) / bars.length) * i);
  //apply new color
  bars[i].style.backgroundColor = 'hsl(' + bgcol + ',48%,73%)';
}

/* eqation explained:
    take our ending hue and divide it by our ending hue:
      endHue - startHue
    
    divide this number by the total number of bars to get a iterative value
      (endHue - startHue) / arrayLength
    
    multiply our new itierative number by the position of the current element in the array
      ((endHue - startHue) / arrayLength) * positionInArray
      
    add our starting value to the new, total number
      startHue + (((endHue - startHue) / arrayLength) * positionInArray)
*/

.content {
  width: 500px;
  height: 250px;
  border: solid 1px #61B6DC;
  border-radius: 16px;
  overflow: hidden;
  
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
}

.bar {
  height: 150px;
  width: 32px;
  background-color: blue;
  
  border-radius: 8px 8px 0 0;
}

<div class="content">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>