Highcharts：包含许多数据点的折线图

Question

我正在尝试生成一个风线图，显示过去24小时的阵风和平均速度，间隔为60秒。

数据每60秒进行一次，因为您可以看到线条不稳定 我尝试使用样条函数，但它没有帮助，它只使线条更粗。 如何解决这个问题？ 乐队文本也在图表的后面，当它应该在前面时，任何想法？

$('#wind').highcharts({
        chart: {
            type: 'line'
        },
        title: {
            text: 'Wind - Last 24 hours'
        },
        subtitle: {
            text: ''
        },
    credits: {
            enabled: false
        },
        xAxis: {
    type: 'datetime',
            labels: {
                    enabled: true
            },
            tickInterval: 3600 * 1000,
            dateTimeLabelFormats: {
                    hour: '%H',
                    day: '%H'
            }
        },
        yAxis: [{
            title: {
                text: 'Wind speed (km/h)'
            },
            min: 0,
            minorGridLineWidth: 0,
    gridLineWidth: 0,
            alternateGridColor: null,
            plotBands: [{ // Light air
                from: 1,
                to: 5,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Light air',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Light breeze
                from: 6,
                to: 11,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Light breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Gentle breeze
                from: 12,
                to: 19,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Gentle breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Moderate breeze
                from: 20,
                to: 28,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Moderate breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Fresh breeze
                from: 29,
                to: 38,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'Fresh breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // Strong breeze
                from: 39,
                to: 49,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Strong breeze',
                    style: {
                        color: '#606060'
                    }
                }
            }, { // High wind
                from: 50,
                to: 61,
                color: 'rgba(68, 170, 213, 0.1)',
                label: {
                    text: 'High wind',
                    style: {
                        color: '#606060'
                    }
                }
    },{ // Gale
                from: 62,
                to: 74,
                color: 'rgba(0, 0, 0, 0)',
                label: {
                    text: 'Gale',
                    style: {
                        color: '#606060'
                    }
                 }
            }]
        }],
        plotOptions: {
            line: {
                lineWidth: 1
                },
                marker: {
                    enabled: false
                }
        },
        series: [{
            name: 'Wind Gust',
    data: concatenatedWindgust,
        },
    {
    name: 'Wind Average',
    data: concatenatedWindavg,
    }]
    });
});

Answer 1

你可以像这样设置你的情节乐队的zindex：

plotBands: [{ // Light air
            from: 1,
            to: 5,
            color: 'rgba(68, 170, 213, 0.1)',
            label: {
                text: 'Light air',
                style: {
                    color: '#606060'
                }
            },
            zIndex:99
        }, 

http://api.highcharts.com/highcharts#yAxis.plotBands.zIndex

关于图表的外观，我认为你试图绘制太多的点。分钟分辨率为每24小时1440点。如果您的图表宽度小于1440像素，则无论如何都会在图中丢失一些点。

我建议你：

1. 更改为使用2分钟间隔。
2. 使用highstock并使用滑块显示12小时，以便用户及时向后滚动。