如何在Highcharts上创建这样一个'No Data'灰色的设计模式?

aor9mmx1  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(129)

Design expected marked in red box
这样的设计是如何在 highcharts 上实现的呢?,尤其是红盒区。
红框区域的设计可以是不同的梯度/颜色,但如何准确地标记这样一个区域的 highcharts 没有点?
用例是这样的,假设用户选择了一个日期范围,而图表上的特定部分没有数据,如上面的屏幕截图所示。

vvppvyoh

vvppvyoh1#

您可以将plotBands与图样填满搭配使用。例如:

xAxis: {
        ...,
        plotBands: [{
            from: -10,
            to: 0,
            color: {
                pattern: {
                    path: {
                        d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
                        strokeWidth: 3
                    },
                    width: 10,
                    height: 10,
                    opacity: 0.4
                }
            }
        }]
    }

现场演示:http://jsfiddle.net/BlackLabel/Lunqzkgb/
API引用:https://api.highcharts.com/highcharts/xAxis.plotBands
文件:https://www.highcharts.com/docs/chart-design-and-style/pattern-fills

相关问题