highcharts - Highcharts 样式问题

Question

我希望在设计线条 Highchart 方面得到一些帮助。

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

我的图表示例

但我正在努力获得块色标签？

任何帮助将非常感激！

谢谢

$('#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]
            }*/]
    });

Answer 1

您可以为图表http://api.highcharts.com/highcharts#chart.plotBackgroundImage设置 plotBackgroundImage ，然后使用 plotBands http://jsfiddle.net/JRhaS/2/

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

Answer 2

如果您查看API doc for plotband labels，我认为您应该能够通过使用“style”、“align”和“verticalAlign”属性来做与图像类似的事情。希望这可以帮助 ：）

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