javascript HighChart柱形图，使用相应区域的颜色呈现部分列

ajsxfq5m 于 2023-02-07 发布在 Java

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

我正在尝试弄清楚如何在简单的单个系列柱形图中用多种颜色呈现每个列的一部分。

series: [
                    {
                        name: "Mod",
                        colorByPoint: true,
                        data: seriesData,
                        zones: [
                            { value: 101, color: '#1D681B' },
                            { value: 121, color: '#ECC518' },
                            { color: '#D50D0D' }
                        ]
                    }
                ]

我可以根据y值所在的区域将每列设置为不同的颜色。在上面的示例中，区域为：

0到100应为绿色
101至120应为黄色
121及以上应为红色

以上方法在一定程度上是可行的，但看起来如下所示：

但是，我老板想要的是这样的东西：

这能用 highcharts 实现吗？

JavaScript

来源：https://stackoverflow.com/questions/75342011/highchart-column-chart-render-portion-of-column-with-color-from-corresponding-z

1条答案

按热度按时间

vmjh9lq91#

您可以使用堆叠列代替区域。下面是如何自动计算系列结构的简单示例：

const steps = [100, 20];
const data = [42, 100, 96, 120, 110, 90, 140];

const series = [{
  color: '#1D681B',
  data: []
}, {
  linkedTo: ':previous',
  color: '#ECC518',
  data: []
}, {
  linkedTo: ':previous',
  color: '#D50D0D',
  data: []
}];

data.forEach((dataEl, i) => {
  let rest = dataEl;
  let counter = 0;
  let value;

  while (rest > 0) {
    value = steps[counter] < rest ? steps[counter] : rest;
    series[counter].data.push({
      x: i,
      y: value
    });
    rest -= value;
    counter++;
  }
});

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  yAxis: {
    reversedStacks: false
  },
  plotOptions: {
    series: {
      stacking: 'normal'
    }
  },
  series
});

- 实时演示：**http://jsfiddle.net/BlackLabel/3h6o0ncg/
- 文件：**https://www.highcharts.com/docs/advanced-chart-features/stacking-charts

赞(0）回复(0）举报 2023-02-07

我来回答

javascript HighChart柱形图，使用相应区域的颜色呈现部分列

1条答案

相关问题

热门标签

最新问答