javascript - Jak vytvořit na Highcharts takový designový vzor 'Žádná data' zašedle zobrazený?

Očekávaný design označený červeným rámečkem

Jak lze takový design dosáhnout v Highcharts, zejména červené zóně?

Design na červené ploše může mít různý gradient/barvu, ale jak přesně označit takovou oblast na high-charts bez bodů?

Případ použití je takový, že pokud uživatel vybere rozsah dat a na konkrétní části grafu, jak je označeno na výše uvedeném snímku obrazovky, nejsou žádná data.

Odpověď č. 1

Můžete použít plotBands s výplní vzorem. Například:

    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
                }
            }
        }]
    }

Živá ukázka: http://jsfiddle.net/BlackLabel/Lunqzkgb/

Reference API: https://api.highcharts.com/highcharts/xAxis.plotBands

Dokumentace: https://www.highcharts.com/docs/chart-design-and-style/pattern-fills