Highcharts 高级图表样式问题

我希望能在线条图表的设计上得到一些帮助

我试图让这里的图形看起来像图像：

但我正在努力得到块彩色标签

任何帮助都将不胜感激

谢谢

$('#container').highcharts({
        chart: {
            type: 'line',
            plotBackgroundImage: 'images/fibre.jpg',
            plotBorderWidth: 0,


            /*,
            marginRight: 130,
            marginBottom: 25*/
        },
        title: 
        {
            text    : strTitle
        },
        tooltip: 
        {
            enabled: false
        },
        xAxis: 
        {
            categories: arrXAxis,               
            title: 
            {
                text: strXTitle
            },

        },          
        yAxis: 
        {
            title: 
            {
                text: ''
            },
            labels: {
                formatter: function() {
                   // return this.value +'?'
                   return('');
                }
            },
            min: 0,
            max: 10,
            minorGridLineWidth: 0,
            alternateGridColor: null,
            gridLineWidth: 0,
            plotBands: 
            [{ 
                from: intRedStart,
                to: intRedEnd,
                color: 'rgba(229, 28, 36, 0.6)',
                label: 
                {
                    text: 'High Risk',
                    style: 
                    {
                        color: '#606060'
                    }
                }
            },
            { 
                from: intAmberStart,
                to: intAmberEnd,
                color: 'rgba(239, 140, 30, 0.6)',
                label: 
                {
                    text: 'Improvement',
                    style: 
                    {
                        color: '#606060'
                    }
                }
            },
            { 
                from: intGreenStart,
                to: intGreenEnd,
                color: 'rgba(43, 174, 115, 0.6)',
                label: 
                {
                    text: 'Healthy',
                    style: 
                    {
                        color: '#606060'
                    }
                }
            }   


            ]
        },
        legend: {
           /*
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0*/
        },
        series:
        [{
            allowPointSelect: false,    
            showInLegend: false,
            data: arrData   
        }   /*, {
                name: '1',
                data: [10]
            }, {
                name: '2',
                data: [0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: '3',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }*/]
    });

如果您查看，我认为您应该能够通过使用“style”、“align”和“verticalAlign”属性来执行类似于图像的操作。希望这有帮助：）

---

编辑：似乎无法使用labels.style对象设置背景色。我猜这是因为标签是SVG元素（更具体地说是tspan），所以它不支持标准HTML元素所支持的所有css。但是，通过对齐标签“顶部”和“左侧”，并设置字体颜色，您可以更接近您的目标。如果您确实需要背景色，可以查看以下内容：

您可以为图表设置plotBackgroundImage，然后使用PlotBand

---

嘿，谢谢你的回复，但我想重建的是带有“健康、改善、高风险”字样的纯色块，而不是图像上不透明的绘图带！您是否尝试设置plotbands标签？标签可以工作，但设置背景色样式似乎不起作用。图表标签也是如此。我找不到一个方法去做Bounder想做的事。我已经更新了他的帖子，从他的链接中加入了图表来源。@SteveP backgroundcolor for labels或plotband？我不确定？在标签样式中设置背景色似乎不起作用。

 plotBands: [{ // mark the weekend
            color: 'rgba(155,255,155,0.5)',
            from: 0,
            to: 100
        },{ // mark the weekend
            color: 'rgba(100,255,200,0.5)',
            from:100,
            to: 200
        }],
    },