javascript - 带有彩色背景列的 Highcharts

Question

是否可以获得如图所示的图表。主要目标是为每个时间单位提供不同的背景颜色，例如为图表中的每一天提供一种颜色......

Answer 1

使用xAxis.plotbands来完成垂直背景颜色(或使用yAxis.plotbands来实现垂直)，如下所示:

xAxis: {
    plotBands: [
        {
            from: ${x1}, 
            to: ${x2}, 
            color: ${color}
        },
    ],
    // more configuration...
}

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
        },
        xAxis: {
            type: 'linear',
            tickPositions: [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
            plotBands: [
                { from: 1, to: 2, color: 'rgba(127, 255, 127, 0.5)' },
                { from: 2, to: 3, color: 'rgba(255, 255, 63, 0.5)' },
                { from: 3, to: 4, color: 'rgba(255, 127, 127, 0.5)' },
                { from: 4, to: 6, color: 'rgba(255, 255, 63, 0.5)' },
                { from: 6, to: 7, color: 'rgba(255, 127, 127, 0.5)' },
                { from: 7, to: 8, color: 'rgba(127, 255, 127, 0.5)' },
                { from: 8, to: 9, color: 'rgba(255, 255, 63, 0.5)' },
                { from: 9, to: 10, color: 'rgba(255, 127, 127, 0.5)' },
                { from: 10, to: 12, color: 'rgba(127, 255, 127, 0.5)' },
            ],
            labels: {
                formatter: function() {
                    switch(parseInt(this.value)) {
                        case 1: return 'Jan';
                        case 2: return 'Feb';
                        case 3: return 'Mar';
                        case 4: return 'Apr';
                        case 5: return 'May';
                        case 6: return 'Jun';
                        case 7: return 'Jul';
                        case 8: return 'Aug';
                        case 9: return 'Sep';
                        case 10: return 'Oct';
                        case 11: return 'Nov';
                        case 12: return 'Dec';
                        default: return 'NaM(' + this.value + ')';
                    }
                }
            }
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            }
        },
        series: [
            {
                type: 'line', // or 'spline'
                name: 'Air Temperature',
                data: [
                    { x: 1,  y: 7.0 },
                    { x: 2,  y: 6.9 },
                    { x: 3,  y: 9.5 },
                    { x: 4,  y: 14.5 },
                    { x: 5,  y: 18.4 },
                    { x: 6,  y: 21.5 },
                    { x: 7,  y: 25.2 },
                    { x: 8,  y: 26.5 },
                    { x: 9,  y: 23.3 },
                    { x: 10, y: 18.3 },
                    { x: 11, y: 13.9 },
                    { x: 12, y: 9.6 }
                ]
            }, 
            {
                name: 'Water Temperature',
                data: [
                    { x: 1,  y: 3.9 },
                    { x: 2,  y: 4.2 },
                    { x: 3,  y: 5.7 },
                    { x: 4,  y: 8.5 },
                    { x: 5,  y: 11.9 },
                    { x: 6,  y: 15.2 },
                    { x: 7,  y: 17.0 },
                    { x: 8,  y: 16.6 },
                    { x: 9,  y: 14.2 },
                    { x: 10, y: 10.3 },
                    { x: 11, y: 6.6 },
                    { x: 12, y: 4.8 }
                ]
        	}
        ],
        plotOptions: {
            series: {
                dataLabels: {
                    enabled: true
                },
                enableMouseTracking: false
            }
        },
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 450px"></div>

只要使用线性值，就可以设置任何分辨率。 (出于格式化目的，我建议使用线性整数值而不是日期，以便更轻松地定义/生成格式化服务器端。