如何使用Highcharts JavaScript生成基于X射线的图表

这种X射线风格的图表本质是渐变填充的面积图，配合深色背景模拟胶片效果，再调整刻度、线条样式就能贴近示例里的视觉感。下面直接上实用代码和调整技巧：

1. 先引依赖 #

直接用CDN引入Highcharts就行：

<script src="https://code.highcharts.com/highcharts.js"></script>

2. 完整实现代码 #

把下面代码放到你的页面里，对应容器用id="xray-chart"的div：

Highcharts.chart('xray-chart', {
    chart: {
        backgroundColor: '#0a0a0a', // 深色背景模拟X射线胶片
        type: 'area'
    },
    title: {
        text: 'X射线检测数据图',
        style: {
            color: '#e0e0e0',
            fontSize: '16px'
        }
    },
    xAxis: {
        categories: ['检测点1', '检测点2', '检测点3', '检测点4', '检测点5', '检测点6', '检测点7'],
        lineColor: '#666',
        tickColor: '#666',
        labels: {
            style: { color: '#e0e0e0' }
        }
    },
    yAxis: {
        title: {
            text: '密度值',
            style: { color: '#e0e0e0' }
        },
        gridLineColor: '#333',
        labels: {
            style: { color: '#e0e0e0' }
        }
    },
    tooltip: {
        backgroundColor: 'rgba(20,20,20,0.9)',
        borderColor: '#555',
        style: { color: '#fff' }
    },
    plotOptions: {
        area: {
            fillColor: {
                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                stops: [
                    [0, 'rgba(100, 200, 255, 0.5)'], // 亮蓝起始，模拟X射线高亮区域
                    [1, 'rgba(100, 200, 255, 0.1)']  // 渐淡到透明
                ]
            },
            lineColor: '#66ccff',
            lineWidth: 2,
            marker: {
                enabled: false // 隐藏数据点，更贴合胶片感
            }
        }
    },
    series: [{
        name: '检测数据',
        data: [120, 150, 90, 200, 130, 180, 110]
    }]
});

3. 细节调整技巧 #

• 要加动态闪烁效果？给area加动画配置：

plotOptions: {
    area: {
        animation: {
            duration: 2000,
            easing: 'easeOutQuart'
        }
        // 其他配置不变
    }
}

• 想换成像色调？改渐变里的RGB值就行，比如青绿色rgba(100,255,200,0.5)或者紫色rgba(200,100,255,0.5)
• 多组数据对比的话，直接加多个series，每个用不同的渐变颜色区分

内容的提问来源于stack exchange，提问作者Sorav Garg