如何在Highcharts中为甘特中具有唯一名称的系列设置背景颜色？

ryoqjall 于 2023-06-23 发布在 Highcharts

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

我想动态显示背景颜色为每个系列（唯一的名称）在甘特。类似于下面屏幕截图中所示的内容
Image showing light grey and grey background for Development & Testing
我通过引用此documentation尝试了yAxis上的plotBands选项
Codepen link for the demo code

yAxis: 
      {
       uniqueNames: true,
       plotBands: [
            {
                color: "#DCDCDC",
                from: 0.5,
                to: 1.5
            },
           {
                color: "grey",
                from: 1.5,
                to: 2.5
            }
        ],
    },

有了这个，我可以设置背景，如果我知道从和到值。但在我的例子中，这些值是动态的。
那么有没有一种方法可以为uniqueNames = true的系列设置背景呢？

highcharts

来源：https://stackoverflow.com/questions/76511374/how-to-set-background-color-for-series-with-unique-name-in-gantt-chart-from-high

1条答案

按热度按时间

w9apscun1#

这有点棘手，API中没有允许您为给定行设置背景的选项，您使用的plotBands是一个很好的方法，但如果您想要动态设置，则不理想。
在这种情况下，您可以使用SVGRenderer并使用回调函数chart.events.load()生成矩形，然后在更改窗口宽度或其他图表更新时使用chart.events.render()动态更新它们的位置和高度。

Demo：https://jsfiddle.net/BlackLabel/jarqk03c/
API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer

https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/chart.events.render

赞(0）回复(0）举报 2023-06-23