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

如果你看一下API doc for plotband labels，我认为你应该可以通过使用“style”，“align”和“verticalAlign”属性来做类似于图像的操作。希望这会有所帮助：）

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

Answer 2

您可以为图表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
        }],
    },

Highcharts造型问题

2 个答案: